使用Angular指令取消下拉列表时如何设置以前的值？

Question

我有一个 angular 指令，您可以将其添加到任何 'select' 元素中，为其提供一个很酷的模式弹出窗口并添加一条自定义消息（我在此示例中省略了）。

我正在尝试在指令中做到这一点，以便在用户单击取消时值恢复到原来的值，否则它似乎已经更改。我可以在 jquery 中正常执行此操作，而无需我

这种奇怪的模式设置

这是一个带有信息的工作 plnkr - http://plnkr.co/edit/JRi5AsarX9AztCWLx1QR?p=preview

角度指令：

angular.module('plunker', ['ui.bootstrap']).directive('ngConfirmClick', ['$modal',
    function($modal) {

    return {
        restrict: 'A',
        scope:{
            ngConfirmClick:"&",
            item:"="
        },

        link: function(scope, element, attrs) {

            if(element.context.tagName == 'SELECT'){

                $("select").change(function() {

                        var ModalInstanceCtrl = function($scope, $modalInstance) {
                            $scope.ok = function() {
                                $modalInstance.close();
                            };
                            $scope.cancel = function() {
                                $modalInstance.dismiss('cancel');
                            };
                        };


                    var message = attrs.ngConfirmMessage || "Are you sure ?";

                    var modalHtml =  '<div class="modal-header" id="confirm-box"><h4 id="title-color" class="modal-title"><i class="fa fa-exclamation"></i> Please Confirm</h4></div><div class="modal-body">' + message + '</div>';
                        modalHtml += '<div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btn btn-warning" ng-click="cancel()">Cancel</button></div>';


                    var modalInstance = $modal.open({
                        template: modalHtml,
                        controller: ModalInstanceCtrl
                    });

                    modalInstance.result.then(function() {
                        scope.ngConfirmClick({item:scope.item}); 
                    }, function() {
                    });
                    });
                }

            }
        }
    }
]);

HTML

  <div ng-controller="ModalDemoCtrl">
    <b>This is the list I'm looping through:</b> <h3>{{peoples}}</h3>

         When I cancel I want to return to the value Sam or whatever value was selected at the time of cancel.

        <select ng-confirm-click="sendPost()" ng-model="selectedPerson" class="form-control-dropdown" ng-options="people as people for people in peoples"></select>

  </div>

控制器：

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

  $scope.selectedPerson = 'Sam';
  $scope.peoples = ['Sam', 'Randy', 'Joe'] ;  

  $scope.sendPost = function(){
    console.log('this makes a POST call normally');
  };


};

我已经尝试了很多方法来让它工作，有些方法比其他方法更难。我的问题是由于某种原因我无法弄清楚，一旦我进入 $modalinstance 以传递原始值

Answer 1

你真的应该让 SELECT 成为指令的一部分，而不是使用 jQuery 来添加事件。使用 ng-model 将 select 绑定到属性。您可以监视该值以在它更改时弹出模式。您可以有 2 个值，一个是以前的值，一个是当前值。如果用户点击弹出窗口中的 "Cancel"，则只需将值设置回之前的值。像这样：

       myApp.directive(.....

         return {
           template: '<select ng-model="newValue">......',
           scope: {
            previousSelectedValue: '='    // Whatever you want selected by default
         },
          link: function(scope) {

            scope.newValue = previousSelectedValue;

            scope.watch('newValue',function(val) {

                // Popup modal. 
                // On Cancel reset newValue=previousSelectedValue 
                // On okay just leave it and set previousSelectedValue to newValue

            };

Answer 2

请检查更新后的 plunker。

我做了一个小改动。我在范围变量中添加了 ngModel 并仅在 scope.ngModel

的变量中维护 oldValue

Answer 3

我已经使用小型共享工厂实现了它。这样它就可以在全球范围内处理。服务充当控制器之间的通信器，还使用 angular 个事件。

这里是Plunkr

下面是维护selectedPerson数据的factory代码。

app.factory('saveData', function() {
  this.data = {};
  var setSelected = function(newObj) {
    this.data = newObj;
  }
  var getSelected = function() {
    return this.data;
  }
  return {
    setSelected: setSelected,
    getSelected: getSelected
  };
});

希望对您有所帮助谢谢。

使用Angular指令取消下拉列表时如何设置以前的值？

How to set previous value when cancelling a drop-down list with Angular Directive?

jquery

angularjs

angularjs-directive