AngularJS 并使用一种模式实现多种功能

Question

我正在开发一个使用 WEB API（来自 C# 后端）并在前端使用 AngularJS 的网站。有一次，我有一个 ng-click 打开一个模态并警告用户继续操作将删除所有测试记录（不要太担心这个）。

单击继续后，将调用 sproc（来自 web-api 控制器->服务->EDMX sproc）等。无论如何，我还有另外两个按钮可以执行相同的东西（显示一个模态，但措辞略有不同）并调用相同的sproc，但在sproc触发后它重定向到不同的页面。

是否可以使用 一个模态，具有不同的 template-urls 并在用户单击继续/模态关闭时重定向到 不同的页面，具体取决于在按下的按钮上？

附注注意模态而不是模型

Answer 1

我为这种情况写了一个可重用的指令。

它允许你传入各种模板 url

<a template-link="/html/delete.html" confirm-dialog="deleteElement()">Delete</a>


'use strict';
/*global angular,console,$:false*/

angular.module('testmodule').

directive(confirmDialog', ['$modal', function($modal) {


    var modalInstance = null;

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

        $scope.cancel = function() {
            if (angular.isDefined(modalInstance) && modalInstance !== null) {
                $modalInstance.dismiss('cancel');
            }
        };

      };

      return {
          restrict: 'A',
          scope: {
              confirmDialog:"&",
              tLink: '@templateLink'
          },
          link: function(scope, element, attrs) {

              element.bind('click', function() {

                  modalInstance = $modal.open({
                      scope: scope,
                      templateUrl: tLink,
                      controller: ['$scope', '$modalInstance', ModalCtrl],
                      backdrop: 'static',
                      keyboard: false,

                  });

                  modalInstance.result.then(function() {
                      scope.confirmDialog();
                  }, function() {
                      //Modal dismissed
                  });
              });
          }
    };
}]);