Why controller does not work in UI-router of angularjs?

Question

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

Radim Köhler · Answer 1 · 2015-10-14T07:53:05.093

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.

edited Oct 14 '15 at 07:53

answered Oct 14 '15 at 07:48

Radim Köhler

122,561
47
239
335

Actually,I also tried to use ng-controller, but when my state changes, the controller dose not updated to desired controller of the mentioned state in url. In this plunker UI-router test project I didn't use ng-controller. But it works as expected . [link]http://embed.plnkr.co/EzT6ZxWYnopUQMJmHtY5/preview – Rahul Baruri Oct 14 '15 at 07:52
NO ng-controller... I moved the controller declaration from state level to view level... can you see that? – Radim Köhler Oct 14 '15 at 07:53
Check the working plunker http://stackoverflow.com/q/32309724/1679310 related to similar quesiton – Radim Köhler Oct 14 '15 at 07:56
Bro Would you please clarify a little bit ? – Rahul Baruri Oct 14 '15 at 07:58
Well, that's why I gave you links to doc and to an example. But let's try this: You can declare `controller` on the state level, if there is no `views : {}` object. It is just a syntactic sugar for us, when the controller and templateUrl are internally converted into `views: { '' : { controller... }}` ... i.e. unnamed view is injected into views. But if you've started to declare `views : {}` yourself, now you have to also declare each controller for each template. Does it help a bit? – Radim Köhler Oct 14 '15 at 08:00
If it is now clear, great. Enjoy mighty UI-Router ;) – Radim Köhler Oct 14 '15 at 08:01

Why controller does not work in UI-router of angularjs?

1 Answers1

Views override state's template properties

Linked