Question

我的代码正在运行，但我想知道是否有更好的方法来改进它。

我在AngularJS中有一个模态对话框，我选择了多个用户。

打开模态：

$scope.openModal = function () {
        var modalInstance = $modal.open({
            templateUrl: '/common/partials/modal-users.html',
            controller: 'ModalUsersController',
            size: 'lg',
            scope: $scope,
            resolve: {
                users: function () {
                    return $scope.users;
                }
            }
        });
};

这是我对模态的偏爱：

<div class="modal-header">
    <h4 class="modal-title">Available Users</h4>
</div>
<div class="modal-body users-list">
    <ul>
        <li ng-repeat="user in users">
            <user-item
                name="user.name"
                email="user.email"
                file="user.file.sizes.sm || avatarDefault"
                add="add(user.id)"
            ></user-item>
        </li>
    </ul>
</div>
<div class="modal-footer">
    <a ng-click="close()" class="btn btn-danger btn-sm">({{totalSelected}}) Close</a>
</div>

项目“user-item”在我的代码中会很常见，因此，我为它创建了一个指令：

.directive('userItem', [function () {
    var d = {};
    d.restrict = 'E';
    d.replace = true;
    d.templateUrl = '/common/partials/user-item.html';
    d.scope = {
        name: '=',
        email: '=',
        file: '=',
        add: '&'
    };

    d.link = function (scope, element) {
        element.on('click', function () {
            element.toggleClass('active');
        });
    };

    return d;
}]);

userItem模板：

<div class="user-item" ng-click="add(user.id)">
    <div class="profile-photo">
        <img ng-src="{{file}}" alt="" class="img-circle">
    </div>
    <div class="infos">
        <strong>{{name}}</strong><br>
        {{email}}
    </div>
</div>

和我的模态控制器：

// Modal Controller
.controller('ModalUsersController', ['$scope', '$modalInstance', 'users',
    function ($scope, $modalInstance, users) {
        $scope.users = users;
        $scope.totalSelected = 0;
        var selected = [];

        $scope.add = function (id) {
            var finded = false;

            // add or remove the userID
            for (var i = selected.length - 1; i >= 0 && !finded; i--) {
                if(selected[i] === id) {
                    // remove
                    selected.splice(i, 1);
                    finded = true;
                }
            }

            // if doesn't exist element in array
            if(!finded) {
                selected.push(id);
            }

            $scope.totalSelected = selected.length;
        };

        $scope.close = function () {
            $modalInstance.dismiss();
        };
    }
]);

简化这一点，当模态打开时，我可以选择用户，在指令中，链接功能将活动类切换到元素。我的模态控制器控制用户并将它们保存在一个数组中以便以后使用。

我对在控制器和链接功能中使用逻辑感到困惑。它是否正确？

有没有更好的方法来优化我的指令？

0 个答案: