CODEWITHSUNDEEP
angularjsangular-ui-routerstate
Rahul Baruri
Rahul Baruri

Reputation: 709

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

Upvotes: 1

Views: 1679

Answers (1)

Radim Köhler
Radim Köhler

Reputation: 123901

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.

Upvotes: 1

Related Questions