AngularJS模态窗口指令

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

奖金,它有一些测试,以确保两个密码字段匹配(或突出显示为错误),如果密码不匹配,或禁用新用户用户名和密码字段为空,则禁用提交按钮.当然,save不会做任何事情,因为它只是一个演示.

请享用.

Answer 2

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

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

您可能还想结帐:

• 资料来源:https://github.com/mgcrea/angular-strap/blob/master/src/modal/modal.js
• Plunkr:http://plnkr.co/edit/vFslNmBAoKPVXtdmBXgv？p = preview

Answer 3

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

从AngularUI 看看这个.它没有twitter bootstrap运行.