[英]AngularJS ng-controller directive does not accept variable (scope function) from javascript, does not give any error either
I am relatively new to angularJS, I am trying to set up a page where inturn multiple pages are called depending upon the selection made previously. 我对angularJS相对较新,我试图建立一个页面,根据先前的选择依次调用多个页面。 All the pages have their own controller, so I am trying to set the controller and view src through the javascript and using them in HTML tags.
所有页面都有其自己的控制器,因此我尝试设置控制器并通过javascript查看src,并在HTML标记中使用它们。
Following is what I am doing: 以下是我在做什么:
HTML page: HTML页面:
<div ng-if="sidebarName=='sidebar-device-wire'">
<div ng-controller="getSidebarCtlr">
<div ng-include src="sidebarSrc"></div>
</div>
</div>
javascript: javascript:
$scope.sidebarSrc="views/sidebars/sidebar-device.html";
$scope.sidebarCtlr="SidebarDeviceCtrl";
$scope.getSidebarCtlr = function(){return $scope.sidebarCtlr;}
For some reason though, this does not work. 但是由于某种原因,这不起作用。 i can get the HTML page but the controller is not being called.
我可以获取HTML页面,但未调用控制器。 Can anyone please tell me what I am doing wrong?
谁能告诉我我做错了吗?
I would also recommend to use ngRoute
or ui.router
because there are many features that aren't easy to implement from scratch (like named views, nested views / nested states or resolves) and these modules are well tested. 我还建议使用
ngRoute
或ui.router
因为有许多功能很难从头开始实现(例如,命名视图,嵌套视图/嵌套状态或解析),并且这些模块已经过良好的测试。
Not sure why your controller isn't running but I guess that the expression of the controller is evaluated before your controller that is setting the name is running. 不确定为什么您的控制器没有运行,但是我猜想在设置名称的控制器运行之前会先评估该控制器的表达式。 So it will be always undefined at compile time.
因此在编译时始终是未定义的。
But if you really like to implement a very basic router you could do it like in the following demo (or in this fiddle ). 但是,如果您真的想实现一个非常基本的路由器,则可以像下面的演示(或此小提琴 )中那样做。
Update 21.12.2015 2015年12月21日更新
Here are some router examples that I wrote for other SO questions: 这是我为其他SO问题编写的一些路由器示例:
Please also have a look at ui.router github pages to learn more about it. 请同时查看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>
What's that code means? 该代码是什么意思?
$scope.getSidebarCtlr = function(){return $scope.sidebarCtlr;}
the ng-directive
requires a Controller
name, its argument type is string
and you cannot pass a simple function, you need to register a valid controller associating it to a module via the controller
recipe. ng-directive
需要一个Controller
名称,其参数类型为string
并且您不能传递简单的函数,您需要注册一个有效的控制器,以通过controller
配方将其与模块关联。
https://docs.angularjs.org/guide/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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.