AngularJS modal pencere yönergesi

Question

Twitter Bootstrap Modal yönergesi için bir yönerge angularJS yönergesi yapmaya çalışıyorum.

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: '&' 
     } 
    }; 
});​ 

İşte JsFiddle örnektir http://jsfiddle.net/okolobaxa/unyh4/15/

Ama işleyici() fonksiyonu sayfasındaki direktifleri kadar birçok kez çalışır. Niye ya? Doğru yol nedir?

Answer 1

angularjs v1.2 dan ngAnimate güçlendirir Bootstrap3 için AngularStrap bir çalışma yerli uygulama yoktur +

• Demo: Ayrıca ödeme isteyebilirsiniz http://mgcrea.github.io/angular-strap/##modals

:

• Kaynak: https://github.com/mgcrea/angular-strap/blob/master/src/modal/modal.js
• Plunkr: http://plnkr.co/edit/vFslNmBAoKPVXtdmBXgv?p=preview

Answer 2

Bunu yeniden yapılandırmak istemediğiniz sürece, aksi takdirde zaten bir çözüm olduğunu düşünüyorum.

AngularUI'den this'a bakın. Twitter bootstrap olmadan çalışır.

Answer 3

Sadece twitter bootstrap docls'ın dediğine göre, çalışanların işe yaraması için yeterli olduğunu düşünüyoruz.

Yönetici sayfamda kullanıcı düzenleme formunu barındırmak için bir model kullanıyorum. Başlatmak için kullandığım düğme, kullanıcı kimliğini bu kapsamın bir işlevine geçiren bir ng tıklama özniteliğine sahiptir, bu da bunu bir hizmete aktarır. Modalın içeriği, hizmetteki değişiklikleri dinleyen ve formda görüntülenecek değerleri güncelleştiren kendi denetleyicisine bağlanır.

Öyleyse ng tıklama özniteliği yalnızca veri aktarımını kapatıyor, modal yine de veri geçişi ve href etiketleri ile tetikleniyor. Modalın kendisinin içeriğine gelince, bu bir kısmi. Bu yüzden, sayfada tüm biçimlendirmenin tek örneğini tetikleyen birden çok düğme var ve tıklanan düğmeye bağlı olarak, bu modeldeki formdaki değerler farklı.

Koduma bir göz atacağım ve bir plnkr demosu oluşturmak için bunlardan herhangi birini çekip çekemeyeceğimi göreceğim.

DÜZENLEME: Ben birlikte atılan ettik benim app kullanıyorum aslında ne gösteren hızlı bir plunker demo: http://embed.plnkr.co/iqVl0Wb57rmKymza7AlI/preview

Bonus, iki şifre alanları maçı sağlamak için bazı testler var (veya Hatalı olarak vurgular bulunuyor) ve şifre eşleşmezse veya yeni kullanıcılar için kullanıcı adı ve şifre alanları boşsa gönder düğmesini devre dışı bırakır. Elbette, tasarruf sadece bir demo olduğu için hiçbir şey yapmıyor.

Keyfini çıkarın.

Answer 4

Ben geç olabilir biliyorum ama ben bir egzersiz olarak neden işleyici çağrıldım defalarca anlamaya çalışıyorum başladı ve bitmiş kadar ben duramadım: P

sebebi Her bir modal için yarattığınız her divun, her şey çalışmaya başladığında, bir kez hiçbir benzersiz id iddiasında bulunmadı.Bunun nedeninin tam olarak ne olduğunu sorma, muhtemelen $ ('#' + scope.modalId) .modal() çağrısı ile bir ilgisi vardır. başkası :)