javascript - 如何在AngularJS的自定义指令中更新解析的数组变量

Question

我使用 AngularUI bootstrap $uibModal 服务制作了一个弹出下拉菜单来替换原始的选择表单元素。

http://jsfiddle.net/ehcj8wn7/17/

angular.module('myApp', [
    'ui.bootstrap'])
    .controller('myController', function ($scope) {
    $scope.cities = ['Shanghai', 'Beijing'];
    $scope.basicInfo = {
        city: 'Shanghai'
    };

    $scope.updateCities1 = function () {
        $scope.cities.pop();
        $scope.cities.push('New York');
    }

    $scope.updateCities2 = function () {
        $scope.cities = ['Taipei', 'Hong Kong'];
    }
})
    .directive('popupDropDown', ['$uibModal', function ($uibModal) {
    var dropDownTemplate = '<div class="modal-header">' +
        '    <h3 class="modal-title">Please Select</h3>' +
        '</div>' +
        '<div class="modal-body">' +
        '    <button class="btn btn-block" ng-class="{\'btn-primary\': item===selected}" ng-repeat="item in items" ng-click="select(item)" ng-if="!cols">{{item}}</button >' +
        '    <div class="row no-padding" ng-if="cols===12">' +
        '        <div class="col-xs-1 text-center no-padding" ng-repeat="item in items">' +
        '            <button class="btn btn-lg no-padding" ng-class="{\'btn-primary\': item===selected}" ng-click="select(item)" >{{item}}</button >' +
        '        </div>' +
        '    </div>' +
        '    <div class="row no-padding" ng-if="cols===6">' +
        '        <div class="col-xs-2 text-center no-padding" ng-repeat="item in items">' +
        '            <button class="btn btn-lg no-padding" ng-class="{\'btn-primary\': item===selected}" ng-click="select(item)" >{{item}}</button >' +
        '        </div>' +
        '    </div>' +
        '    <div class="row no-padding" ng-if="cols===4">' +
        '        <div class="col-xs-3 text-center no-padding" ng-repeat="item in items">' +
        '            <button class="btn btn-lg no-padding" ng-class="{\'btn-primary\': item===selected}" ng-click="select(item)" >{{item}}</button >' +
        '        </div>' +
        '    </div>' +
        '    <div class="row no-padding" ng-if="cols===3">' +
        '        <div class="col-xs-4 text-center no-padding" ng-repeat="item in items">' +
        '            <button class="btn btn-lg no-padding" ng-class="{\'btn-primary\': item===selected}" ng-click="select(item)" >{{item}}</button >' +
        '        </div>' +
        '    </div>' +
        '    <div class="row no-padding" ng-if="cols===2">' +
        '        <div class="col-xs-6 text-center no-padding" ng-repeat="item in items">' +
        '            <button class="btn btn-lg no-padding" ng-class="{\'btn-primary\': item===selected}" ng-click="select(item)" >{{item}}</button >' +
        '        </div>' +
        '    </div>' +
        '</div>' +
        '<div class="modal-footer">' +
        '    <button class="btn btn-warning" type="button" ng-click="cancel();">Cancel</button>' +
        '</div>';

    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, element, attrs, controller) {
            var popupDropDownAttribute = scope.$eval(attrs.popupDropDown);
            var showPopupDropDown = function (evt) {
                var dropDown = $uibModal.open({
                    animation: true,
                    template: dropDownTemplate,
                    resolve: {
                        items: function () {
                            return popupDropDownAttribute.items;
                        },
                        cols: function () {
                            return popupDropDownAttribute.cols;
                        },
                        selected: function () {
                            return element.val();
                        }
                    },
                    controller: function ($scope, $modalInstance, items, cols, selected) {
                        $scope.items = items;
                        $scope.cols = cols;
                        $scope.selected = selected;

                        $scope.select = function (v) {
                            $modalInstance.close(v);
                        };

                        $scope.cancel = function () {
                            $modalInstance.dismiss('cancel');
                        };
                    }
                });

                dropDown.result.then(function (v) {
                    controller.$setDirty();
                    controller.$setViewValue(v);
                    controller.$render();
                });
            };
            element.attr('readonly', '');
            element.addClass('dropdown');

            element.on('click', showPopupDropDown);
        }
    };
}]);

这对于静态项目效果很好，并且可以通过弹出或推送来更新项目(在函数 updateCities1 中)，但是当我通过直接分配更改项目内容(在函数 updateCities2 中)时，弹出下拉列表中的项目会下降不更新。

有没有办法观察 AngularJs 指令中的项目，以便第二种方法可以工作？或者当我想更改项目时，我是否必须使用第一种方式来更新它们？是否有任何快捷方式可以清除多个项目并将其推送到原始数组中？

Answer 1

我终于明白了。

指令中存在错误。显示模式时应获取 popupDropDownAttrabute，因此链接应为:

link: function (scope, element, attrs, controller) {
        var showPopupDropDown = function (evt) {
            var popupDropDownAttribute = scope.$eval(attrs.popupDropDown);
            var dropDown = $uibModal.open({
                animation: true,
                template: dropDownTemplate,
                resolve: {
                    items: function () {
                        return popupDropDownAttribute.items;
                    },
                    cols: function () {
                        return popupDropDownAttribute.cols;
                    },
                    selected: function () {
                        return element.val();
                    }
                },
                controller: function ($scope, $modalInstance, items, cols, selected) {
                    $scope.items = items;
                    $scope.cols = cols;
                    $scope.selected = selected;

                    $scope.select = function (v) {
                        $modalInstance.close(v);
                    };

                    $scope.cancel = function () {
                        $modalInstance.dismiss('cancel');
                    };
                }
            });

            dropDown.result.then(function (v) {
                controller.$setDirty();
                controller.$setViewValue(v);
                controller.$render();
            });
        };
        element.attr('readonly', '');
        element.addClass('dropdown');

        element.on('click', showPopupDropDown);
    }