動態添加控制器到ng-include

Question

這是更改ng-include控制器的動態方式嗎？

我的應用程序允許用戶創建頁面的某些內容和控制器。 我可以更改ng-include src，但不知道如何動態關聯新控制器。 以下代碼不起作用：

<div ng-app="MyApp">
    <div ng-controller="ParentController">
        <select ng-model="currentItem" ng-options="item as item.url for item in items track by item.url">
        </select>
        {{ currentItem }}
        <div ng-include src="currentItem.url" ng-controller="currentItem.controller"></div>
    </div>
</div>

我有以下JS：

var app = angular.module("MyApp",[]);

app.controller('ParentController', ['$scope',function($scope){
    $scope.items = [{
        url: 'page1.html',
        controller: 'Page1Controller'
    },
    {
        url: 'page2.html',
        controller: 'Page2Controller'
    }];
    $scope.currentItem = {};
}]);

app.controller('Page1Controller', ['$scope',function(){
    alert('Page1');
}]);

app.controller('Page2Controller', ['$scope',function(){
    alert('Page2');
}]);

Answer 1

我已經通過使用指令來代替：

<div ng-include src="currentItem.url" dyn-controller="currentItem.controller"></div>

JS指令：

app.directive('dynController', ['$compile', '$parse',function($compile, $parse) {
  return {
    restrict: 'A',
    terminal: true,
    priority: 100000,
    link: function(scope, elem, attrs) {
            // Parse the scope variable
            var name = $parse(elem.attr('dyn-controller'))(scope);
            elem.removeAttr('dyn-controller');
            elem.attr('ng-controller', name);

            // Compile the element with the ng-controller attribute
            $compile(elem)(scope);       
  };
}]);

這里的技巧是監視屬性更改，添加ng-controller然后編譯元素。

感謝

如何在指令的attrs中監視屬性

和

動態NG控制器名稱

Answer 2

以下項目數組是具有兩個字段的純對象數組：url和controller，均包含字符串值。

 $scope.items = [{
        url: 'page1.html',
        controller: 'Page1Controller'
    },... ]

您真正需要的是對該功能的引用，並且可以通過$ injector服務來實現。

盡管這可能行得通，但我不明白為什么不使用ParentController來更改數組（或指令 ）中的對象。