AngularJS范围对象这里

Question

范围的问题，我有一个页面，包括NG-开关：

<div ng-switch on="pagename()"> 
     <div ng-switch-when="plans"> 
      <div ng-include="'/assets/angular/plans/existingplans.html'"></div> 

     </div> 
     <div ng-switch-when="new"> 
      <div ng-include="'/assets/angular/plans/newplans.html'"></div> 
     </div> 
     <div ng-switch-when="credits"> 
      <div ng-include="'/assets/angular/plans/creditspanel.html'"></div> 
     </div> 
     <div ng-switch-when="wizard"> 
      <div ng-include="'/assets/angular/plans/wizard.html'"></div> 
     </div> 

    </div> 

正如你可以看到我打开控制器的方法，这种方法势必会一个范围变量，它附带一个RESTful数据源：

$scope.pagename = function() { 
      var loc = $location.path().split("/").pop(); 

      if (loc == "plans" && $scope.plansinfo.data.length <1) { 
       return "wizard"; 
      } else if (loc == "plans" && $scope.plansinfo.data.length >=1){ 
       return "plans"; 
      } else if(loc == "new"){ 
       return "new"; 
      } 
      else if(loc == "wizard"){ 
       return "wizard"; 
      } 
      else { 
       // alert(loc) 
       console.log(loc); 
       console.log(typeof $scope.plansinfo.data); 

       return "credits"; 
      } 
     }; 

其基本思想是将用户驱动到正确的页面。问题出在你登陆的那个页面上，并且附加了$ scope.plansinfo数据源对象，但是当你遍历页面的时候，其他页面没有定义这个对象。

所以简而言之，我在控制器中做了什么错误，以便在嵌套的作用域中创建对象，而不是顶级作用域？

感谢

汤姆

==== ====编辑

在试图清理东西我也跟着下面的建议，将代码移动到服务，但现在我得到的是：

TypeError: string is not a function 

这里是我的尝试：

.factory('PlansData', function() { 
    var data = {}; 
    data.plansinfo = {}; 

    return { 
     updateinfo: function(newdata) { 
      data.plansinfo = newdata; 
     }, 
     pagename: function (location) { 
       return 'credits'; 
     }, 
     plansinfo: data 
    } 
}) 

控制器：

 $scope.pagename = PlansData.pagename($location); 

所以它应该只是返回字符串，而是我得到上述错误。我错过了什么？

感谢

汤姆

Answer 1

这是使用服务来管理你的模型数据，而不是一个控制器的好时机。您可能已经使用过一项服务来管理您的RESTful API，因此您可能在那里包含pagename函数。如果不是，这里是创建一个新的服务来管理数据的一个例子：

app.service('locService', function(){ 
    this.pagename = function() { 
     // switch function here 
    }; 
}); 

然后你可以注入该服务将需要的信息控制器：

app.controller('myController', function (locService){ 
    $scope.pagename = locService.pagename; 
}); 

Answer 2

What am I doing wrong in my controller so that the object is being created in the nested scope, not the top level scope?

如果您在你PlansCtrl使用原始的，或者你重新分配对象，它不会工作：

var someObj = { hello: 'there' }; 

function MyCtrl($scope) { 
    $scope.plansinfo = {}; // object, okay 
    console.log($scope); 
} 
function MySubCtrl($scope) { 
    $scope.plansinfo = someObj; // oops, reassigned the object 
    console.log($scope); 
} 

以上会发生什么为t帽子控制器MySubCtrl将获得一个名为plansinfo的本地属性，该属性隐藏/遮蔽同名的MyCtrl属性。这是the way JavaScript works。

分配到子控制器的对象属性应该工作：

var someObj = { hello: 'there' }; 

function MyCtrl($scope) { 
    $scope.plansinfo = {}; 
    console.log($scope); 
} 
function MySubCtrl($scope) { 
    $scope.plansinfo.obj = someObj; 
    console.log($scope); 
} 

fiddle

什么上面的情况是，控制器MySubCtrl的外观和找不到它$scope定义对象属性plansinfo.obj，然后它使用原型继承并在其父级上找到该对象，因此它在那里被设置。