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

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

myApp.directive（'gamePanel'，函数（$compile）{
返回{
限制：'E'，
templateUrl:“templates/wordlistPage.ejs”，
链接：功能（范围、要素、属性）{
attrs.ngController=“wordlistsPageController”；//不工作
scope.submitWordlist=函数（）{
//更改html
elem.html（“”）；
$compile（elem.contents（））（范围）；
//更改控制器
attrs.ngController=“options页面控制器”///不工作
};
scope.backToWordlist=函数（）{
elem.html（“”）；
$compile（elem.contents（））（范围）；
attrs.ngController=“wordlistsPageController”///不工作
};
}//端连杆
}
});//结束指令

如何动态更改指令控制器 要在指令链接函数中实例化不同的控制器，请使用

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

angular.module（“myApp”）.指令（'gamePanel'，函数（$controller）{
返回{
限制：'E'，
模板：“游戏面板模板”
”，
//控制器：“页面控制器作为vm”，
链接：函数（范围、元素、属性、ctrl、transclude）{
var locals={$scope:scope，
$element:elem，
$attrs:attrs，
$transclude，transclude
};
scope.vm=$controller（“页面控制器”，局部变量）；
}//端连杆
}
});

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

vm

放在作用域中

最佳做法 注入的局部变量应遵循

$compile

服务提供的局部变量的约定。有关

$compile

服务注入局部变量的更多信息，请参阅

注意：内存泄漏 销毁作用域时，应注销在这些作用域上创建的所有观察者。这可以通过以下方式完成

销毁控制器时，应注销控制器创建的所有观察者。这可以通过以下方式完成

---

使用

$controller

服务实例化控制器。谢谢你的回答，但我完全不知道你的意思。你能提供一个如何使用它的例子吗？行：$controller（“wordlistsPageController”）；抛出“$injector:unpr Unknown Provider”错误。是否可以使用ng控制器将控制器包含在ejs文件本身上？但不确定这是否是一个好主意。您可能因为没有将作用域作为本地对象注入而出现注入错误。按照--。