如何在angularjs的自定義指令中更新已解析的數組變量

Question

我使用AngularUI引導程序$ 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

最後我想通了。

指令中存在一個錯誤。 popupDropDownAtratrabute應該在顯示模態時取出，因此，鏈接應該是：

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); 
    }