AngularJS模态窗口指令

前端之家收集整理的这篇文章主要介绍了AngularJS模态窗口指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试为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()函数页面上的指令一样多次运行.为什么?什么是正确的方法

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

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

您可能还想结帐:

>资料来源:https://github.com/mgcrea/angular-strap/blob/master/src/modal/modal.js
>普兰克:http://plnkr.co/edit/vFslNmBAoKPVXtdmBXgv?p=preview

猜你在找的Angularjs相关文章