Question

我正在处理一个应用程序，我正在努力确保正确使用$scope。

我看到最好的practices video和Miško有点说我们不应该操纵$scope属性。

我一直在创建这样的变量：

    $scope.groups = groupService.getGroups()
    $scope.users = userService.getUsers();
    $scope.selectedUser = false;

我应该重新编写我的应用程序以使用类似的东西：

    $scope.model = {
        selectedAvailableGroups: [],
        selectedAssignedGroups: [],
        allGroups: groupService.getGroups(),
        allUsers: userService.getUsers(),
        selectedUser: false
    }

我问的原因是我很少看到使用$scope.model方式的示例或应用程序，它通常只是在$scope上声明的属性。

Answer 1

由于javascript搜索继承链的方式，您的模型名称中应始终有一个句点。我会按照你的建议建议你重构。

要清楚，当您在javascript对象上设置基本属性时，如：

$scope.Name ='Fred'

如果Name不存在，javascript将创建一个新属性而不检查父对象。

如果你喜欢这样：

$scope.Model.Name = 'Fred'

javascript会一直检查父项，直到找到Model.Name或发现它未定义。

Answer 2

我遵循非常精益的控制器。服务和模型拥有大部分功能。维护和创建单元测试将更容易。我分别创建模型POCO类。

var groups= {
   this.a='';
   this.b='';
};

服务看起来像

mymodule.service('myservice',[function(){
   var mymodel=_.extend(new groups, <anyothermodels>);
    return mymodel
})];

我的控制器看起来像

mymodule.controller('mycontroller',['myservice','$scope',function(myservice,scope){
 $scope.model= myservice;
})];

Answer 3

这完全取决于您的应用程序的上下文。

例如，如果您的控制器要通过ng-repeat或类似方法迭代所有组，那么将它附加到范围是有意义的。对于所有用户的迭代也是如此。

请记住，将内容附加到要在视图中使用的$ scope（HTML）。虽然有人说在某些情况下制作服务可以使事情变得更容易，但将数组附加到$ scope是有意义的。

根据您的上下文，我不确定您对'groups'或'users'数组做了什么，但是如果您要在DOM中使用它们，请将它们附加到范围。比我更复杂的东西我建议将它全部重构成一个服务。例如，如果您尝试查找所选用户参与的所有组：

angular.module('app', [])
    .controller('UserCtrl', function ($scope, UserService, GroupService) {
        var users = UserService.getUsers();
        var groups = GroupService.getGroups();
        $scope.selectedUser = null;

        $scope.selectUser = function (user) {
            $scope.selectedUser = user;
            $scope.groups = groups.filter(function (group) {
                return group.users.indexOf(user) >= 0;
            };
        }

    });

然后在你的HTML中

<ul class="userList">
    <li ng-repeat="user in users" ng-click="selectUser(user)">
        {{user.name}}
    </li>
</ul>

<ul class="userGroupList" ng-show="selectedUser">
    <li ng-repeat="group in groups">
        {{group.name}}
    </li>
</ul>

在Angular中使用$ scope属性的最佳实践

3 个答案: