AngularJS ng-controller指令不接受来自javascript的变量（作用域函数），也不给出任何错误

Question

我对angularJS相对较新，我试图建立一个页面，根据先前的选择依次调用多个页面。 所有页面都有其自己的控制器，因此我尝试设置控制器并通过javascript查看src，并在HTML标记中使用它们。

以下是我在做什么：
HTML页面：

<div ng-if="sidebarName=='sidebar-device-wire'">
        <div ng-controller="getSidebarCtlr">    
            <div ng-include src="sidebarSrc"></div>
        </div>
    </div>

javascript：

$scope.sidebarSrc="views/sidebars/sidebar-device.html";
$scope.sidebarCtlr="SidebarDeviceCtrl";

$scope.getSidebarCtlr = function(){return $scope.sidebarCtlr;}

但是由于某种原因，这不起作用。 我可以获取HTML页面，但未调用控制器。 谁能告诉我我做错了吗？

Answer 1

我还建议使用ngRoute或ui.router因为有许多功能很难从头开始实现（例如，命名视图，嵌套视图/嵌套状态或解析），并且这些模块已经过良好的测试。

不确定为什么您的控制器没有运行，但是我猜想在设置名称的控制器运行之前会先评估该控制器的表达式。 因此在编译时始终是未定义的。

但是，如果您真的想实现一个非常基本的路由器，则可以像下面的演示（或此小提琴 ）中那样做。

2015年12月21日更新

这是我为其他SO问题编写的一些路由器示例：

• 简单的ui.router示例-jsfiddle
• 更加复杂的嵌套状态示例ui.router- jsfiddle
• ngRoute动态链接列表-jsfiddle

请同时查看ui.router github页面以了解更多信息。

 angular.module('simpleRouter', []) .directive('simpleView', simpleViewDirective) .provider('simpleRoutes', SimpleRoutesProvider) .controller('MainController', MainController) .controller('HomeController', HomeController) .config(function(simpleRoutesProvider) { simpleRoutesProvider.state([{ url: '/', templateUrl: 'home.html', controller: 'HomeController' }, { url: '/view1', templateUrl: 'view1.html' }, { url: '/view2', templateUrl: 'view2.html', controller: function($scope) { $scope.test = 'hello from controller' } }]); simpleRoutesProvider.otherwise('/'); }) function HomeController($scope) { $scope.hello = 'hello from home controller!!'; console.log('home controller started') } function MainController($scope) { $scope.hello = 'Main controller test'; } function simpleViewDirective() { return { restrict: 'EA', scope: {}, template: '<div ng-include="templateUrl"></div>', controller: function($scope, $location, $controller, simpleRoutes) { var childControllerInst; $scope.templateUrl = simpleRoutes.currentRoute.templateUrl || simpleRoutes.otherwise.templateUrl; $scope.$watch(function() { return $location.path(); }, function(newUrl) { //console.log(newUrl) $scope.templateUrl = simpleRoutes.changeRoute(newUrl); childControllerInst = $controller(simpleRoutes.currentRoute.controller || function() {}, {$scope: $scope}); }); $scope.$on('$destroy', function() { childControllerInst = undefined; }) }, link: function(scope, element, attrs) { } } } function SimpleRoutesProvider() { var router = { currentRoute: { templateUrl: '' }, states: [], otherwise: {}, changeRoute: function(url) { var found = false; angular.forEach(router.states, function(state) { //console.log('state', state); if (state.url == url) { router.currentRoute = state; found = true; } }); if (!found) router.currentRoute = router.otherwise; //console.log(router.currentRoute); return router.currentRoute.templateUrl; } }; this.state = function(stateObj) { router.states = stateObj; }; this.otherwise = function(route) { angular.forEach(router.states, function(state) { if (route === state.url ) { router.otherwise = state; } }); //console.log(router.otherwise); }; this.$get = function simpleRoutesFactory() { return router; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="simpleRouter" ng-controller="MainController"> <script type="text/ng-template" id="home.html">home route {{hello}}</script> <script type="text/ng-template" id="view1.html">view1</script> <script type="text/ng-template" id="view2.html">view2 {{test}}</script> <div simple-view=""> </div> <a href="#/">home</a> <a href="#/view1">view1</a> <a href="#/view2">view2</a> <br/> {{hello}} </div> 

Answer 2

该代码是什么意思？ $scope.getSidebarCtlr = function(){return $scope.sidebarCtlr;}

ng-directive需要一个Controller名称，其参数类型为string并且您不能传递简单的函数，您需要注册一个有效的控制器，以通过controller配方将其与模块关联。

https://docs.angularjs.org/guide/controller

 angular.module('test', []).controller('TestCtrl', function($scope) { $scope.greetings = "Hello World"; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <section ng-app="test"> <article ng-controller="TestCtrl">{{ greetings }}</article> </section>