Javascript 在Angular中使用$scope属性时的最佳做法

我正在开发一个应用程序，并试图确保正确使用

$scope

我看了最好的，米什科有点说我们不应该在这本书中操纵

$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

上声明的属性

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

需要明确的是，在javascript对象上设置基元属性时，如：

$scope.Name ='Fred'

如果名称不存在，javascript将在不检查父对象的情况下创建新属性

如果您喜欢这样做：

$scope.Model.Name = 'Fred'

---

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

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

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

服务看起来像

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

---

这实际上完全取决于应用程序的上下文

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

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

考虑到您的上下文，我不确定您正在使用“组”或“用户”数组做什么，但是如果您要在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>

{{user.name}




{{group.name}

ur$scope.model保存您的整个服务？@Batman是的，我可能需要从视图中调用模型和操作方法。哇……我的控制器中有大约50-100行。您有2个这样的属性：是的，这些属性中的大多数最终都位于我的应用程序中的DOM上。“所有用户”作为下拉列表位于“选择”元素中，“所有组”用于允许应用程序用户从组中添加或删除用户。我将它们与ngRepeat或ngOptions一起使用。所有数据都来自服务，我使用控制器从中获取对象，视图呈现数据。你的html基本上就是我的html，但现在我添加了model.user.name、model.group.name等。这样做有点烦人。对我来说，很难看出这样做的好处，除了“这是你应该做的，以防万一”

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