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

通常，我要做的是使用变量初始化嵌套的

ng控制器

内部

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>

嵌套：{{name}
{{name}}
{{name}}

变成这样：

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

嵌套：{{name}
{{name}}

问题：它不是这样工作的。这两种方法都不管用，我在谷歌搜索了一个小时左右后就尝试过了

---

有什么“合法的”和好的方法来实现这一点吗？

我想，在这一点上，没有真正的方法，使用角度特征。您可以创建一个指令并使用未记录的动态控制器功能

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>

嵌套的：
{{name}}

请注意，我已将ng控制器的位置从进行ng repeat的元素更改为ng repeat，因为ng repeat（

1000

）的优先级高于ng控制器（

500

），所以ng repeat的范围将占优势，您最终不会重复任何内容

---

我想，在这一点上，没有一种真正的方法，就是使用角度特征。您可以创建一个指令并使用未记录的动态控制器功能

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>

嵌套的：
{{name}}

请注意，我已将ng控制器的位置从进行ng repeat的元素更改为ng repeat，因为ng repeat（

1000

）的优先级高于ng控制器（

500

），所以ng repeat的范围将占优势，您最终不会重复任何内容

---

我想，在这一点上，没有一种真正的方法，就是使用角度特征。您可以创建一个指令并使用未记录的动态控制器功能

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>

嵌套的：
{{name}}

请注意，我已将ng控制器的位置从进行ng repeat的元素更改为ng repeat，因为ng repeat（

1000

）的优先级高于ng控制器（

500

），所以ng repeat的范围将占优势，您最终不会重复任何内容

---

我想，在这一点上，没有一种真正的方法，就是使用角度特征。您可以创建一个指令并使用未记录的动态控制器功能

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>

嵌套的：
{{name}}

请注意，我已将ng控制器的位置从进行ng repeat的元素更改为ng repeat，因为ng repeat（

1000

）的优先级高于ng控制器（

500

），所以ng repeat的范围将占优势，您最终不会重复任何内容

---

在看它的过程中

投入了更多的时间，检查angular的震源等

给定给

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>

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';
    });

---

在这方面投入了更多的时间，检查angular的来源等

给定给

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>

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';
    });

---

在这方面投入了更多的时间，检查angular的来源等

给定给

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>

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';
    });

---

在这方面投入了更多的时间，检查angular的来源等

给定给

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>

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';
    });

---

---

你想做什么？您提供的示例是控制器的错误使用，您应该提供ng模型或服务，但我想这只是简化的产物。

ng repeat

已经为每个迭代创建了子控制器。@DavidSergey，我已经更新了问题。我想要的是。。。假设我有一个小部件集合。每个小部件都有一个控制器。我想重复这个集合，并为每个集合创建嵌套控制器them@tymeJV，我想在这些嵌套的控制器下有一些复杂的逻辑，它的作用域等等。我怀疑这样做是否合法/正确-但我不是100%。你想怎么做？您提供的示例是控制器的错误使用，您应该提供ng模型或服务，但我想这只是简化的产物。

ng repeat

已经为每个迭代创建了子控制器。@DavidSergey，我已经更新了问题。我想要的是。。。假设我有一个小部件集合。每个小部件都有一个控制器。我想重复这个集合，并为每个集合创建嵌套控制器them@tymeJV，我想要一些复杂的逻辑