angularjs中的动态控制器更改答案

【问题标题】：Dynamic controller change in angularjsangularjs中的动态控制器更改
【发布时间】：2017-10-22 04:21:33
【问题描述】：

我需要通过单击一些输入按钮来动态更改特定 div 的控制器。

为什么第一种方式有效，但如果我用控制器本身替换一个元素数组，则第二种方式无效（参见下面的代码）。

以及如何更好地实现这样的功能？

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";}

【问题讨论】：

标签： angularjs controller angularjs-ng-repeat

【解决方案1】：

它适用于ng-repeat，因为ng-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>

【讨论】：

非常感谢！我只是想确保 Angular 在这两种情况下都不会监视控制器的变化。我对它通过单元素数组与 ng-repeat 一起工作这一事实感到困惑，但你现在已经对我说清楚了。谢谢。