Question

这里的范围问题，我有一个包含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);

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

由于

汤姆

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

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

如果您在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属性。这是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将查找并找不到其plansinfo.obj上定义的对象属性$scope，因此它使用原型继承并在其父级上找到对象，因此它在那里设置

AngularJS Scope对象位于错误的位置

2 个答案: