为什么控制器不angularjs的UI路由器工作？ [英] Why controller does not work in UI-router of angularjs?

问题描述

当我尝试加载测试状态或这些国家，控制器不影响。模板是完全改变了，但没有数据来自于国家配置中提到的控制器。

和我没有用NG-控制器指令任何地方。

  myApp.config（函数（$ stateProvider，$ urlRouterProvider）{
$ stateProvider.state（'任务'，
    {
        网址：'/任务，
        控制器：TasksController
        观点：{
            侧栏：{templateUrl：/部分/任务/ taskcreateform.html}，
            内容：{templateUrl：/部分/任务/ taskgrid.html'}
        }}）
.STATE（'音符'，
    {
        网址：'/笔记，
        控制器：TasksController
        观点：{
            侧栏：{templateUrl：/部分/任务/ taskcreateform.html}，
            内容：{templateUrl：/部分/任务/ taskgrid.html'}
        }
}）
.STATE（测试，
    {
        网址：'/测试/：身份证'，
        控制器：AtTestController
        观点：{
            侧栏：{templateUrl：/部分/任务/ taskupdateform.html}，
            内容：{templateUrl：'/分/ test.html的'}
        }}）
.STATE（'edittask'，
    {
        网址：'/ edittask /：editabletaskid'，
        控制器：TasksController
        观点：{
            侧栏：{templateUrl：/部分/任务/ taskupdateform.html}，
            内容：{templateUrl：/部分/任务/ taskgrid.html'}
        }，
        解决：{            editabletask：函数（$ stateParams，任务）{
                 Task.get（{ID：$ stateParams.editabletaskid}，
                        功能（响应）{
                            返回响应;
                        }，
                        功能（错误）{
                            的console.log（ERR）;
                        }）;
            }
        }  }）;
  $ urlRouterProvider.otherwise（'任务'）;}）;
 

和我的一个控制器：

  ////////////////////测试控制器/////////////
myApp.controller（AtTestController功能（$范围）{ $ scope.appname =拉胡尔·应用; $ scope.name =功能（）{
    的console.log（$ scope.appname）;
   }
  $ scope.name（）;
 }）;
 

解决方案

问题的关键是：

  

任何控制器总是属于查看，不是的状态的

例如。而不是这样的：

  //因为我们使用的意见，该控制器是现在跳过
控制器：AtTestController
观点：{
    侧栏：{templateUrl：/部分/任务/ taskupdateform.html}，
    内容：{templateUrl：'/分/ test.html的'}
}
 

我们需要的是：

 的意见：{
    侧栏：{
       templateUrl：/部分/任务/ taskupdateform.html'，
       控制器：AtTestController
    }，
    内容：{templateUrl：'/分/ test.html的'}
}
 

检查文档的区别：

正文覆盖国家的模板属性

  

如果你定义一个对象的意见，你的国家的templateUrl，模板，templateProvider将被忽略。所以，你需要这些意见的父布局的情况下，你可以定义包含若干意见对象的布局状态下包含模板一个抽象的状态，和一个孩子的状态。

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

解决方案

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.

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