Question

我正在尝试为Twitter Bootstrap Modal制作一个指令angularJS指令。

    var demoApp = angular.module('demoApp', []);

demoApp.controller('DialogDemoCtrl', function AutocompleteDemoCtrl($scope) {
    $scope.Langs = [
        {Id:"1", Name:"ActionScript"},
        {Id:"2", Name:"AppleScript"},
        {Id:"3", Name:"Asp"},
        {Id:"4", Name:"BASIC"},
        {Id:"5", Name:"C"},
        {Id:"6", Name:"C++"}
    ];

    $scope.confirm = function (id) {
        console.log(id);
        var item = $scope.Langs.filter(function (item) { return item.Id == id })[0];
        var index = $scope.Langs.indexOf(item);
        $scope.Langs.splice(index, 1);
    };
});

demoApp.directive('modal', function ($compile, $timeout) {
    var modalTemplate = angular.element("<div id='{{modalId}}' class='modal' style='display:none'  tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'><div class='modal-header'><h3 id='myModalLabel'>{{modalHeaderText}}</h3></div><div class='modal-body'><p>{{modalBodyText}}</p></div><div class='modal-footer'><a class='{{cancelButtonClass}}' data-dismiss='modal' aria-hidden='true'>{{cancelButtonText}}</a><a ng-click='handler()' class='{{confirmButtonClas}}'>{{confirmButtonText}}</a></div></div>");
    var linkTemplate = "<a href='#{{modalId}}' id= role='button' data-toggle='modal' class='btn small_link_button'>{{linkTitle}}</a>"

    var linker = function (scope, element, attrs) {
        scope.confirmButtonText = attrs.confirmButtonText;
        scope.cancelButtonText = attrs.cancelButtonText;
        scope.modalHeaderText = attrs.modalHeaderText;
        scope.modalBodyText = attrs.modalBodyText;
        scope.confirmButtonClass = attrs.confirmButtonClass;
        scope.cancelButtonClass = attrs.cancelButtonClass;
        scope.modalId = attrs.modalId;
        scope.linkTitle = attrs.linkTitle;

        $compile(element.contents())(scope);
        var newTemplate = $compile(modalTemplate)(scope);

        $(newTemplate).appendTo('body');

        $("#" + scope.modalId).modal({
            backdrop: false,
            show: false
        });
    }

    var controller = function ($scope) {
        $scope.handler = function () {
            $timeout(function () {
                $("#"+ $scope.modalId).modal('hide');        
                $scope.confirm();            
            });
        }
    }

    return {
        restrict: "E",
        rep1ace: true,
        link: linker,
        controller: controller,
        template: linkTemplate
        scope: {
            confirm: '&'
        }
    };
});

这是JsFiddle示例http://jsfiddle.net/okolobaxa/unyh4/15/

但是handler（）函数在页面上运行的次数与指令一样多。为什么？什么是正确的方法？

Answer 1

我发现只需使用twitter bootstrap模式就像twitter bootstrap docs所说的那样，足以使它们正常工作。

我正在使用模式在我的管理页面上存放用户编辑表单。我用来启动它的按钮有一个ng-click属性，它将用户ID传递给该范围的函数，然后该函数将该函数传递给服务。模态的内容与其自己的控制器相关联，该控制器侦听来自服务的更改并更新要在表单上显示的值。

所以.. ng-click属性实际上只是关闭数据，模态仍然是用data-toggle和href标签触发的。至于模态本身的内容，那是部分的。所以，我在页面上有多个按钮，它们都会触发标记中的模态的单个实例，并且根据单击的按钮，该模式中表单上的值是不同的。

我将查看我的代码，看看我是否可以将其中任何一个用于构建plnkr演示。

编辑：我把一个快速的plunker演示组合在一起，演示了我在我的应用程序中使用的内容：http://embed.plnkr.co/iqVl0Wb57rmKymza7AlI/preview

Bonus，它有一些测试可以确保两个密码字段匹配（或突出显示为错误），如果密码不匹配则禁用提交按钮，或者对于新用户，用户名和密码字段为空。当然，save不会做任何事情，因为它只是一个演示。

享受。

Answer 2

在AngularStrap中，Bootstrap3中有一个可用的本机实现，它利用AngularJS v1.2 +中的ngAnimate

演示：http://mgcrea.github.io/angular-strap/##modals

您可能还想结帐：

Answer 3

好吧，除非你想重新发明这个，否则我认为已经有了解决方案。

从AngularUI查看this。它在没有twitter bootstrap的情况下运行。

Answer 4

我知道这可能会迟到但我开始试图弄清楚为什么这个处理程序被作为一个练习多次被调用，直到完成后我才能停止：P

原因很简单，你为每个模态创建的每个div都没有唯一的id，一旦我确定一切都开始工作了。不要问我究竟是什么原因，可能与$（'＃'+ scope.modalId）.modal（）调用有关。

如果其他人试图解决这个问题，我应该发布我的发现：）

AngularJS模态窗口指令

4 个答案: