为什么控制器在 angularjs 的 UI-router 中不起作用? [英] Why controller does not work in UI-router of angularjs?

问题描述

当我尝试加载测试"状态或任何这些状态时，控制器不会影响.模板已完美更改，但没有数据来自状态配置中提到的控制器.

When I try to load the "test" state or any of these state, controllers does not affect. Template are changed perfectly but no data comes from the mentioned controller in state configuration.

而且我没有在任何地方使用 ng-controller 指令.

And I did not use ng-controller directive any where.

myApp.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state('task',
    {
        url:'/task',
        controller:"TasksController",
        views:{
            "sidebar":{templateUrl:'/partial/task/taskcreateform.html'},
            "content":{templateUrl:'/partial/task/taskgrid.html'}
        }

})
.state('notes',
    {
        url:'/notes',
        controller:"TasksController",
        views:{
            "sidebar":{templateUrl:'/partial/task/taskcreateform.html'},
            "content":{templateUrl:'/partial/task/taskgrid.html'}
        }


})
.state('test',
    {
        url:'/test/:id',
        controller:"AtTestController",
        views:{
            "sidebar":{templateUrl:'/partial/task/taskupdateform.html'},
            "content":{templateUrl:'/partial/test.html'}
        }



})
.state('edittask',
    {
        url:'/edittask/:editabletaskid',
        controller:"TasksController",
        views:{
            "sidebar":{templateUrl:'/partial/task/taskupdateform.html'},
            "content":{templateUrl:'/partial/task/taskgrid.html'}
        },
        resolve:{

            editabletask: function($stateParams,Task){
                 Task.get({id:$stateParams.editabletaskid},
                        function(response){
                            return response;
                        },
                        function(err){
                            console.log(err);
                        });
            }
        }

  });
  $urlRouterProvider.otherwise('task');

});

我的一个控制器是:

////////////////////TEST CONTROLLER/////////////
myApp.controller("AtTestController",function($scope){

 $scope.appname="Rahul Apps";

 $scope.name=function(){
    console.log($scope.appname);
   }
  $scope.name();
 });

推荐答案

重点是:

任何Controller总是属于view，而不是state

例如而不是这个:

// because we used views, this controller is now skipped
controller:"AtTestController",
views:{
    "sidebar":{templateUrl:'/partial/task/taskupdateform.html'},
    "content":{templateUrl:'/partial/test.html'}
}

我们需要这个:

views:{
    "sidebar":{
       templateUrl:'/partial/task/taskupdateform.html',
       controller:"AtTestController",
    },
    "content":{templateUrl:'/partial/test.html'}
}

检查文档中的差异:

如果你定义了一个views对象，你的state的templateUrl、template和templateProvider将被忽略.因此，如果您需要这些视图的父布局，您可以定义包含模板的抽象状态，以及包含视图"对象的布局状态下的子状态.

If you define a views object, your state's templateUrl, template and templateProvider will be ignored. So in the case that you need a parent layout of these views, you can define an abstract state that contains a template, and a child state under the layout state that contains the 'views' object.

这篇关于为什么控制器在 angularjs 的 UI-router 中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！