AngularJS，来自变量的嵌套控制器 [英] AngularJS, nested controllers from variable

问题描述

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

JSFiddle

JS

angular.module('app',[]).controller('main',function($scope){angular.extend($scope,{name:'父控制器',项目:[{名称:'nested2'}，{名称:'nested1'}]});}).controller('nested1',function($scope){$scope.name = "Name1";}).controller('nested2',function($scope){$scope.name = "Name2";});

我想要这个:

嵌套:{{name}}<div ng-controller="nested1">{{name}}</div><div ng-controller="nested2">{{name}}</div>

变成这样:

嵌套:{{name}}<div ng-repeat="项目中的项目"><div ng-controller="item.name">{{name}}</div>

问题:它不能以这种方式工作.它没有任何其他方式，我在谷歌搜索了一个小时左右后尝试过.

是否有任何合法"且不错的方法来实现这一目标?

解决方案

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

示例:-

.directive('dynController', function($controller){返回 {scope:true,//创建一个子作用域链接:功能(范围，榆树，属性){var ctrl =scope.$eval(attrs.dynController);//获取控制器///实例化并设置作用域$controller(ctrl, {$scope:scope})//或者你可以这么好//elm.data('$ngControllerController', $controller(ctrl, {$scope:scope}) );}}});

在您看来:-

 
<div ng-repeat="项目中的项目">嵌套:<div dyn-controller="item.name" ng-click="test()">{{name}}</div>

演示

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

一边看

Generally, what I want to do, is to initialize nested ng-controller inside ng-repeat using variable.

JSFiddle

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

I want this:

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

to become to something like this:

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

Problem: it does not work this way. Neither it works any other way, that I've tried after google'ing for an hour or so.

Is there any "legal" and nice way to achieve that at all?

解决方案

There isn't a real way,using angular features it at this point, i suppose. You could create a directive and use un-documented dynamic controller feature controller:'@', name:'controllerName'. But this approach will not evaluate bindings or expressions that provide the controller name. What i can think of is a hack by instantiating a controller provided and setting it to the element.

Example:-

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

And in your view:-

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

Demo

Note that i have changed the position of ng-controller from the element that does ng-repeat, since ng-repeat (1000) has higher priority than ng-controller (500), ng-repeat's scope will prevail and you end up not repeating anything.

While looking at it

这篇关于AngularJS，来自变量的嵌套控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！