Question

通常，我想要做的是使用变量在ng-controller内初始化嵌套ng-repeat。

JS

angular.module('app',[])
.controller('main',function($scope){
    angular.extend($scope,{
        name:'Parent Controller',
        items:[
            {name:'nested2'},
            {name:'nested1'}
            ]
    });
})
.controller('nested1',function($scope){
    $scope.name = "Name1";
})
.controller('nested2',function($scope){
    $scope.name = "Name2";
});

我想要这个：

<div ng-controller="main" ng-app='app'>
    Nested: {{name}}
    <div ng-controller="nested1">{{name}}</div>
    <div ng-controller="nested2">{{name}}</div>
</div>

成为这样的事情：

<div ng-controller="main">
    Nested: {{name}}
    <div ng-repeat="item in items">
        <div ng-controller="item.name">{{name}}</div>
    </div>
</div>

问题：它不能以这种方式工作。它没有任何其他方式，我已经尝试了谷歌一个小时左右。

是否有任何“合法”和良好的方式来实现这一目标？

Answer 1

我想，目前没有一种真正的方法，使用角度特征。您可以创建指令并使用未记录的动态控制器功能controller:'@', name:'controllerName'。但是这种方法不会评估提供控制器名称的绑定或表达式。我能想到的是通过实例化提供的控制器并将其设置为元素来实现黑客攻击。

实施例： -

.directive('dynController', function($controller){
  return {
    scope:true, //create a child scope
    link:function(scope, elm, attrs){
      var ctrl =scope.$eval(attrs.dynController); //Get the controller
      ///Instantiate and set the scope
      $controller(ctrl, {$scope:scope})

     //Or you could so this  well
     //elm.data('$ngControllerController', $controller(ctrl, {$scope:scope}) ); 
    }
  }
});

在您看来： -

  <div ng-controller="main">
    <div ng-repeat="item in items">
    Nested:
          <div dyn-controller="item.name" ng-click="test()">{{name}}</div>
    </div>
  </div>

<强> Demo

请注意，我已经从ng-repeat元素更改了ng-controller的位置，因为ng-repeat（1000）的优先级高于ng-controller（500），ng -repeat的范围将占上风，你最终不会重复任何事情。

看着它

Answer 2

投入更多的时间，检查角度的来源等。

给予ng-controller的表达式根本没有被评估。

这是我发现的最佳方法：

<强> HTML：

    <div ng-controller="main">
        Nested: {{name}}
        <div ng-repeat="item in items">
            <div ng-controller="nested" ng-init="init(item)">{{name}}</div>
        </div>
    </div>

<强> JS：

angular.module('myApp', [])
    .controller('main', function ($scope, $controller) {
        angular.extend($scope, {
            name: 'Parent Controller',
            items: [
                {name: 'nested2'},
                {name: 'nested1'}
            ]
        });
    })
    .controller('nested', function ($scope, $controller) {
        angular.extend($scope, {
            init: function (item) {
                $controller(item.name, {'$scope': $scope});
            }
        });
    })
    .controller('nested1', function ($scope) {
        $scope.name = 'test1';
    })
    .controller('nested2', function ($scope) {
        $scope.name = 'test2';
    });

AngularJS，来自变量的嵌套控制器

2 个答案: