AngularJS模態窗口指令

我正在嘗試爲Twitter Bootstrap Modal製作一個指令angularJS指令。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/

但處理器（）函數運行多次，網頁上的指示。爲什麼？什麼是正確的方式？

來源

2012-11-16 okolobaxa