Question

我有我的指令，我想更改控制器和页面的一小部分html，点击提交按钮。更改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

如何动态更改指令控制器

要在指令链接功能中实例化不同的控制器，请使用convenience -> ... -> designated initializer服务。

$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服务提供的本地人的惯例。有关$compile服务注入的本地人的详细信息，请参阅AngularJS $compile service API Reference API -- controller。

注意：内存泄漏

在销毁范围时，应取消注册在这些范围上创建的所有观察者。这可以通过invoking scope.$destroy()完成。

当销毁控制器时，控制器创建的所有观察者都应该取消注册。这可以通过invoking the de-register function returned by each $watch完成。

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

1 个答案:

如何动态更改指令控制器

最佳实践

注意：内存泄漏