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.

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');

});

And My one Controller is :

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

 $scope.appname="Rahul Apps";

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

回答1:

The point is:

Any Controller always belongs to view, not to state

E.g. instead of this:

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

we need that:

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

Check the doc for the difference:

Views override state's template properties

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.

来源：https://stackoverflow.com/questions/33119452/why-controller-does-not-work-in-ui-router-of-angularjs

标签

angularjs

angular-ui-router

state