web-dev-qa-db-ja.com

Angular UIディレクティブとしてのモーダル確認

Angularディレクティブを使用して、confirm（）関数を模倣するangular-bootstrapを作成しようとしています。

ここに私が達成したい視覚的な結果と動作を示すプランクがあります： http://embed.plnkr.co/27fBNbHmxx144ptrCuXV/preview

次に、ディレクティブを使用してモーダルウィンドウを呼び出します。

<div ng-controller="ModalDemoCtrl">
     <ul>
         <li ng-repeat="item in items">
              {{ item }} <a ng-really-message="Are you sure ?" ng-really-click="reallyDelete(item)">Delete</a>
         </li>
     </ul>
</div>

「confirm（）」関数を使用する作業ディレクティブを作成しましたが、確認関数の代わりにモーダルウィンドウを使用しようとすると、「$digest already in progress "エラー。

プランク： http://plnkr.co/edit/JSOInyZIvMtBZFaNvQRO?p=preview

var ModalDemoCtrl = function($scope, $modal) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.reallyDelete = function(item) {
    $scope.items = window._.remove($scope.items, function(elem) {
      return elem != item;
    });
  };
};

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

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

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

      return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          element.bind('click', function() {
            var message = attrs.ngReallyMessage || "Are you sure ?";

            /*
            //This works
            if (message && confirm(message)) {
              scope.$apply(attrs.ngReallyClick);
            }
            //*/

            //*This doesn't work
            var modalHtml = '<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.$apply(attrs.ngReallyClick); //raise an error : $digest already in progress
            }, function() {
              //Modal dismissed
            });
            //*/

          });

        }
      }
    }
  ]);

私

javascriptangularjsangularjs-directiveangular-ui-bootstrap
15
mmai

関数バインディング（&）：

scope:{
    ngReallyClick:"&", //declare a function binding for directive
    item:"=" //the current item for the directive
},

あなたのhtml：

<a ng-really-message="Are you sure ?" ng-really-click="reallyDelete(item)" item="item">Delete</a>

ユーザーが[ok]をクリックしたときに関数を呼び出します。

modalInstance.result.then(function() {
     scope.ngReallyClick({item:scope.item}); //call the function though function binding
}, function() {
              //Modal dismissed
});

[〜＃〜] demo [〜＃〜]

27
Khanh TO