8

我正在尝试为 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() 函数运行的次数与页面上的指令一样多。为什么？什么是正确的方法？

4

4 回答 4

8

我发现仅按照 twitter bootstrap 文档所说的方式使用 twitter bootstrap modals 就足以让它们正常工作。

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

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

我会看一下我的代码，看看我是否可以从中提取任何一个来构建一个 plnkr 演示。

编辑：我整理了一个快速的 plunker 演示，基本上说明了我在我的应用程序中使用的内容：http: //embed.plnkr.co/iqVl0Wb57rmKymza7AlI/preview

奖励，它有一些测试来确保两个密码字段匹配（或将它们突出显示为错误），如果密码不匹配，或者新用户的用户名和密码字段为空，则禁用提交按钮。当然，save 没有任何作用，因为它只是一个演示。

享受。

于 2013-01-15T15:58:10.040 回答
7

AngularStrap中有一个用于 Bootstrap3 的本地实现，它利用ngAnimate了 AngularJS v1.2+

您可能还想结帐：

于 2013-05-06T14:57:10.227 回答
6

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

从AngularUI中查看。它在没有 twitter 引导的情况下运行。

于 2012-11-16T15:38:41.320 回答
4

我知道可能已经晚了，但我开始试图弄清楚为什么处理程序被多次调用作为练习，直到完成我才能停下来：P

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

尽管如果其他人试图解决这个问题，我应该发布我的发现:)

于 2013-09-14T07:05:01.953 回答