Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/20.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angularjs 在迭代对象集合时,是否有任何方法可以动态分配ng控制器?_Angularjs_Angularjs Ng Repeat_Ng Controller_Angular Ui Bootstrap Tab - Fatal编程技术网

Angularjs 在迭代对象集合时,是否有任何方法可以动态分配ng控制器?

Angularjs 在迭代对象集合时,是否有任何方法可以动态分配ng控制器?,angularjs,angularjs-ng-repeat,ng-controller,angular-ui-bootstrap-tab,Angularjs,Angularjs Ng Repeat,Ng Controller,Angular Ui Bootstrap Tab,使用angular 1.6.6和ui bootstrap 2.5.0 如果action属性值不为null,我将尝试使用控制器。 我的每个选项卡的逻辑都非常不同,因此我不想将所有选项卡放在一个控制器中。有办法解决这个问题吗 行动 $scope.actions = [ { slug: "basicData", title: "Grunddata", icon: "fa fa-table"

使用angular 1.6.6和ui bootstrap 2.5.0

如果action属性值不为null,我将尝试使用控制器。 我的每个选项卡的逻辑都非常不同,因此我不想将所有选项卡放在一个控制器中。有办法解决这个问题吗

行动

$scope.actions = [
    {
        slug: "basicData",
        title: "Grunddata",
        icon: "fa fa-table",
        template: templatePath + "basicData.html",
        disabled: false,
        controller: null
    }, {
        slug: "responsible",
        title: "Ansvariga",
        icon: "fa fa-address-book-o",
        template: templatePath + "responsible.html",
        disabled: false,
        controller: null
    }, {
        slug: "reportTime",
        title: "Rapportera tid",
        icon: "fa fa-clock-o",
        template: templatePath + "reportTime.html",
        disabled: false,
        controller: "ActivityTimeReportingController"
    }
])

这是我的标签集

<uib-tabset active="activePill" vertical="true" type="pills">
            <uib-tab ng-repeat="action in actions" index="$index+1" disable="action.disabled">
                <uib-tab-heading>
                    <span class='{{action.icon}}'></span>&nbsp;{{action.title}}
                </uib-tab-heading>
                <div ng-include="action.template" ng-if="!action.controller" ng-controller="action.controller"></div>
                <div ng-include="action.template" ng-if="action.controller"></div>
            </uib-tab>
        </uib-tabset>
在我的标签里:

<div ng-include="action.template" ng-if="!action.controller" ng-controller="getController(action.controller)"></div>

带有相同的错误消息

未注册名为“getController(action.controller)”的控制器


迭代对象集合时,有没有办法动态分配ng控制器?

这里有一个可行的解决方案:

HTML

<script type="text/ng-template" id="customControllerTemplate.html">
  Controller name: {{name}}
</script>

<div ng-controller="myCtrl">
  <div ng-repeat="controller in controllerList">
    <div custom-controller="controller.name">
      <div ng-include="'customControllerTemplate.html'"></div>
    </div>
  </div>
</div>

创建动态指令,然后为每个指令指定一个控制器,而不是使用ng include roll来绑定模板url


如果您没有太多类型的操作..那么使用ng If或ng开关,并使用ng控制器或使用控制器的指令为每个操作创建一行。imo,您尝试实现的动态代码不是正确的方法。

谢谢您的回答!尝试过了,同样的错误。“名为{action.controller}的控制器”“未注册。”@MrFile我已更新我的答案。这次应该可以:)
<script type="text/ng-template" id="customControllerTemplate.html">
  Controller name: {{name}}
</script>

<div ng-controller="myCtrl">
  <div ng-repeat="controller in controllerList">
    <div custom-controller="controller.name">
      <div ng-include="'customControllerTemplate.html'"></div>
    </div>
  </div>
</div>
var myApp = angular.module('myApp',[]);

myApp.controller('myCtrl', myCtrl);
myApp.controller('firstController', firstController);
myApp.controller('secondController', secondController);
myApp.directive('customController', customController);

function myCtrl($scope) {
    $scope.controllerList = [
        {
        name: 'firstController'
      },
      {
        name: 'secondController'
      }
    ]
}


function firstController($scope){
    console.log('firstController','loaded');
    $scope.name = 'firstController';
}

function secondController($scope){
    console.log('secondController','loaded');
    $scope.name = 'secondController';
}

function customController($compile){
    return {
        priority:1001, 
        terminal:true, 
        link: function(scope,element,attrs){
           var ctrlName = scope.$eval(attrs['customController']);
           element = angular.element(element.children());
           element.attr('ng-controller',ctrlName);
           $compile(element)(scope);
        }
   };          
}