1

这里的范围问题，我有一个包含 ng-switch 的页面：

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

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

谢谢

汤姆

4

2 回答 2

0

我在控制器中做错了什么，以便在嵌套范围而不是顶级范围中创建对象？

如果您在 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);
}

上面发生的情况是控制器 MySubCtrl 将获得一个名为的本地属性，该属性plansinfo隐藏/隐藏同名的 MyCtrl 属性。这就是JavaScript 的工作方式。

分配给子控制器中的对象属性应该有效：

var someObj = { hello: 'there' };

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

fiddle

上面发生的情况是控制器 MySubCtrl 将查找并找不到plansinfo.obj在其上定义的对象属性$scope，因此它使用原型继承并在其父对象上找到对象，因此将其设置在那里。

于 2013-05-22T16:52:56.760 回答
0

这将是使用服务而不是控制器来管理模型数据的好时机。您可能已经使用服务来管理您的 RESTful API，因此您可以在pagename其中包含该功能。如果没有，这里是一个创建新服务来管理数据的示例：

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

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

app.controller('myController', function (locService){
    $scope.pagename = locService.pagename;
});
于 2013-05-22T16:37:17.243 回答