angularjs의 동적 컨트롤러 변경

일부 입력 버튼을 클릭하여 특정 div의 컨트롤러를 동적으로 변경해야합니다.angularjs의 동적 컨트롤러 변경

첫 번째 방법은 효과가 있지만 컨트롤러 자체로 한 요소 배열을 대체하는 경우 두 번째 방법으로 작동하지 않습니다 (아래 코드 참조).

더 나은 방법으로 이러한 기능을 구현하는 방법은 무엇입니까?

index.html을

<body ng-app="myApp"> 
<div ng-controller="MyCtrl"> 
    Hello, {{name}}! 
    <input type="button" value="click me" ng-click="changeCtrl(0)"/> 
    <input type="button" value="click me" ng-click="changeCtrl(1)"/> 
    <input type="button" value="click me" ng-click="changeCtrl(2)"/> 

    <div ng-repeat = "ctrl in curCtrl" ng-controller="ctrl"> 
     {{ blah }} 
    </div> 
</div> 
</body> 
</html>

script.js

var myApp = angular.module('myApp', []); 

myApp.controller("MyCtrl", MyCtrl); 

function MyCtrl($scope) { 
    $scope.name = 'Username'; 

    $scope.ctrls = [ctrlA, ctrlB, ctrlC]; 
    $scope.curCtrl = [ctrlA]; 

    $scope.changeCtrl = function (idx) { 
     $scope.curCtrl = [$scope.ctrls[idx]]; 
    } 
} 

function ctrlA($scope) {$scope.blah = "One";} 
function ctrlB($scope) {$scope.blah = "Two";} 
function ctrlC($scope) {$scope.blah = "Three";}

Plnkr with controller instead (doesn't work)

index.html을

<body ng-app="myApp"> 
<div ng-controller="MyCtrl"> 
    Hello, {{name}}! 
    <input type="button" value="click me" ng-click="changeCtrl(0)"/> 
    <input type="button" value="click me" ng-click="changeCtrl(1)"/> 
    <input type="button" value="click me" ng-click="changeCtrl(2)"/> 

    <div ng-controller="curCtrl"> 
     {{ blah }} 
    </div> 
</div> 
</body> 
</html>

script.js

var myApp = angular.module('myApp', []); 

myApp.controller("MyCtrl", MyCtrl); 

function MyCtrl($scope) { 
    $scope.name = 'Username'; 

    $scope.ctrls = [ctrlA, ctrlB, ctrlC]; 
    $scope.curCtrl = ctrlA; 

    $scope.changeCtrl = function(idx) { 
    $scope.curCtrl = $scope.ctrls[idx]; 
    } 
} 

function ctrlA($scope) {$scope.blah = "One";} 
function ctrlB($scope) {$scope.blah = "Two";} 
function ctrlC($scope) {$scope.blah = "Three";}

출처

2017-05-22 Lelby

그것은 ng-repeatng-repeat 때문에 파괴한다으로 작동 할 때 배열 참조 변경 HTML을 다시는 - 컴파일합니다. $element에 $compile 서비스를 사용하여 배열없이 동일한 결과를 얻으려면 수동으로 컴파일해야합니다. 그것은 귀하의 컨트롤러에서 할 수 있지만, 지시가 더 좋을 수도 있습니다.

클라이언트 측 라우팅을 활용하여이를 구현할 수도 있습니다 (중첩 된 상태를 허용하는 ui-router). 이 답변 밖으로

점검 :

Dynamic NG-Controller Name

Dynamically assign ng-controller on runtime

그렇지 않으면, 당신은 ng-if와 $timeout로 빠른 해킹을 사용할 수

$scope.changeCtrl = function(idx) { 
    // ng-if sees null and destroys the HTML 

    $scope.curCtrl = null; 

    $timeout(function() { 
     // ng-if sees a new object and re-compiles the HTML 

     $scope.curCtrl = $scope.ctrls[idx]; 
    }); 
} 

<div ng-if="curCtrl" ng-controller="curCtrl"> 
    {{ blah }} 
</div>

출처

2017-05-22 13:48:20

감사합니다 많이! 난 각도가 두 경우 모두 컨트롤러 변경 사항을 감시하지 않도록하고 싶었어요. 나는 그것이 하나의 요소 배열에 의해 ng-repeat와 함께 작동한다는 사실에 혼란 스러웠다. 그러나 당신은 나에게 분명하게했다. 감사. – Lelby

반갑습니다. 이 질문에 대한 답변을 수락 된 답변으로 표시하십시오. –

답변

관련 문제