如何在 angular.js 中动态更改指令控制器

Question

我有我的指令，我想更改控制器和 html 页面的一小部分 onclick 提交按钮。更改 HTML 有效，但更改控制器无效。

行：attrs.ngController = "wordlistsPageController"；不管用。请让我知道我可以做些什么来动态设置控制器，因为这不起作用。

这是一个小网页游戏，所以我不想改变整个页面，只改变3个游戏页面之间的游戏部分。

这是我的指令：

myApp.directive('gamePanel', function ($compile) {
return {
    restrict: 'E',
    templateUrl: "templates/wordlistPage.ejs",
    link : function(scope, elem, attrs) {
        attrs.ngController = "wordlistsPageController";//NOT WORKING

        scope.submitWordlist = function() {
                //change html
                elem.html('<ng-include src="\'templates/gameOptionsDialogPage.ejs\'"></ng-include>');
                $compile(elem.contents())(scope);
                //change controller
                attrs.ngController = "optionsPageController";///NOT WORKING
        };

        scope.backToWordlist = function() {
            elem.html('<ng-include src="\'templates/wordlistPage.ejs\'"></ng-include>');
            $compile(elem.contents())(scope);
            attrs.ngController = "wordlistsPageController";///NOT WORKING
        };
    }//end link
}
});//end directive

Answer 1

如何动态更改指令控制器

要在指令链接函数中实例化不同的控制器，请使用 $controller 服务。

angular.module("myApp").directive('gamePanel', function ($controller) {
return {
    restrict: 'E',
    template: "<p>Game Panel Template</p>",
    //controller: "pageController as vm",
    link : function(scope, elem, attrs, ctrl, transclude) {
        var locals = { $scope: scope,
                       $element: elem,
                       $attrs: attrs,
                       $transclude, transclude
                     };
        scope.vm = $controller("pageController", locals);
    }//end link
}
});

上面的示例实例化了一个控制器并将其作为 vm.

的作用域

Best practice

The injected locals should follow the conventions of the locals provided by the $compile service. For more information on $compile service injected locals, see AngularJS $compile service API Reference API -- controller.

Beware: memory leaks

When destroying scopes, all watchers created on those scopes should be de-registered. This can be done by invoking scope.$destroy().

When destroying controllers, all watchers created by the controller should be de-registered. This can be done by invoking the de-register function returned by each $watch.

如何在 angular.js 中动态更改指令控制器

How do you dynamically change a directives controller in angular.js

controller

directive

dynamic

hyperlink

angularjs

如何动态更改指令控制器

Best practice

Beware: memory leaks