Question

在Angular和使用Bootstrap 3.0中，我想打开一个模态窗口来确认模态操作按钮继续完成请求的操作。我已将模态代码放入指令中。我有模态工作，但更改data-ng-click属性似乎没有连接到Angular。我对使用AngularUI不感兴趣。

我的问题 - 我如何使用指令（页面上的单个实例）并传递一个方法来执行“指令外”调用？

我正在创建一个通用的模态指令来确认，例如通过模态确认删除我需要提供一个id，标题，内容（呈现为transclude）删除按钮文本，删除按钮操作＆lt;＆lt;这就是我正在努力的目标。

总而言之，我有模态框，我从重复的表格按钮删除点击事件打开模态。模态打开但不执行确认的操作按钮代码。

在页面上我有一个模态指令调用（设置一个简单的初始隐藏模态）：

   <modal-confirm modalid="myModalTest" 
title="Confirm delete" actiontext="Confirm delete">
Are you sure you wish to delete this application?
</modal-confirm>

从重复按钮调用，属性“data-post-event-method”包含我想要调用的操作方法：

   <a id="applicationDeleteItem_{{app.applicationID}}" 
data-ng-click="OpenModal($event, 'myModalTest')"  
data-post-event-method="dosomething({{app.applicationID}});" 
class="btn btn-primary btn-xs">Delete?</a>

注意：这里的OpenModal方法是使用范围从指令引入的。$ parent - 也可能在这里使用更好的建议，无论如何我试图避免在控制器中编写UI代码。

在我的控制器中，我只有动作代码：

$scope.dosomething = function (p) {
            alert('perform the delete' + p);
            console.log(p);
        };

这是我的模态确认指令：

define(['angular'], function (angular) {
    'use strict';

    return angular.module('dsAppCore.Directives').directive('modalConfirm', function ($timeout, $compile) {
        var t = "";

     t += '  <!-- Modal -->                                                                                                               ';
     t += '  <div class="modal fade" id="{{modalid}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">      ';
     t += '    <div class="modal-dialog">                                                                                                 ';
     t += '      <div class="modal-content">                                                                                              ';
     t += '        <div class="modal-header">                                                                                             ';
     t += '          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>                         ';
     t += '          <h4 class="modal-title">{{title}}</h4>                                                                             ';
     t += '        </div>                                                                                                                 ';
     t += '        <div class="modal-body">                                                                                              ';
     t += '            <div ng-transclude></div>                                                                                           ';
     t += '        </div>                                                                                                                 ';
     t += '        <div class="modal-footer">                                                                                             ';
     t += '          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>                                    ';
     t += '          <button type="button" id="{{modalid}}_confirmClickEvent" class="btn btn-primary" data-ng-click="" >{{actiontext}}</button>                                                  ';
     t += '        </div>                                                                                                                 ';
     t += '      </div><!-- /.modal-content -->                                                                                           ';
     t += '    </div><!-- /.modal-dialog -->                                                                                              ';
     t += '  </div><!-- /.modal -->                                                                                                       ';

     return {
         restrict: 'E',
         transclude: true,

         scope: {
             title: '@',
             modalid: '@',
             actiontext: '@'
         },
         link: function (scope, element, attrs) {

             scope.$parent.OpenModal = function (e, modalId) {
                 var self = this;

                 // Open the modal
                 $('#' + modalId).modal('toggle');

                 // Get a reference to the UI element that clicked the item
                 var elemID = angular.element(e.srcElement).attr('id');

                 // Extract the post event action method call(s)
                 var postEventMethod = angular.element(e.srcElement).attr("data-post-event-method");

                 // Update the action button with the calls

                 var some = { m: postEventMethod }

                // $timeout(function () {
                 var elemIDAction = angular.element($("#" + scope.modalid + "_confirmClickEvent"));


                 elemIDAction.attr("data-ng-click", some.m);

                 // This not good-  it causes the delete action to be called x times 
                 // where x is the number of times the window has been opened.
                 $compile(elemIDAction)(scope.$parent);

             };
         },
            controller: function ($scope, $element) {

            },
            template: t
        };
    });
});

所以简而言之 - 虽然我可以打开模态框，但我无法为ng-click事件分配方法。使用jquery替换文本会导致单击按钮时不会发生任何事情。我无法传递指令声明中的方法，因为这个模态由指令调用的许多外部服务。

Answer 1

好的，我解决了这个问题 - 我创建了一个角度服务并将一些代码移动到控制器：

厂：

define(['angular'], function (angular) {
    'use strict';

    return angular.module('dsAppCore.Factories').factory('coreModalConfirm', ['$window', 'coreSerErrorReporter', 'coreSerLogging',
                                                    function ($window, coreSerErrorReporter, coreSerLogging) {
        var self = this;

        var confirm = function (message) {
            return $window.confirm(message);
        };

        var showModal = function (modalId)
        {
            $('#' + modalId).modal('toggle');
        }

        return {
            confirm: confirm,
            showModal: showModal
        };
    }]);

});

控制器：

 $scope.confirmDeleteApp = function (appID)
        {
            coreModalConfirm.showModal("myModalTest");
            $scope.appToDeleteIfConfirmed = appID;
        }

        $scope.deleteApp = function ()
        {
            alert($scope.appToDeleteIfConfirmed);

        }

我的模态指令：

<modal-confirm data-modal-confirm-action="deleteApp()" data-modal-title="Confirm - delete application?" data-modal-content="Are you sure you want to delete this application?" data-modal-action-text="Delete application" ></modal-confirm>

HTML页面上的主要调用链接按钮（在ng-repeat内）

 <a id="applicationDeleteItem_{{app.applicationID}}" data-ng-click="confirmDeleteApp(app.applicationID)" class="btn btn-primary btn-xs">Delete?</a>

我还有一些事情要做，以使其更通用。

将方法传递给角度指令ng-click事件后声明

1 个答案: