Yeniden Popup'a geçiş yapamıyorum - AngularJS

Question

Şu anda AngularJS'ye kendimi tanıtıyorum ve tıklatıldığında bir modalın açılacağı bir düğme için kod yazıyorum. Modal güzelce açılır. Modaldaki 'X' i tıkladığımda, o da gider. Modal açılışı yeniden yapmak için false olarak ayarlandığında boole, her şey düzgün bir şekilde gider, ancak modal, ikinci kez etrafa yayılmaz. Bu neden oluyor?

HTML:

<input type="button" ng-click="toggleModal()" class="btn btn-default" value="Path">{{showModal}} 
<modal title="Select a Testcase" visible="showModal"> 
    <form role="form" > 
     <div class="form-group" style="padding: 5%"> 
      <div id="tree_div"></div> 
     </div> 
     <input type="button" value="Submit" class="btn btn-default"> 
    </form> 
</modal> 

JAVASCRIPT:

$scope.showModal = false; 

     $scope.toggleModal = function(){ 
      $scope.showModal = !$scope.showModal; 
     }; 

DİREKTİFİ:

'use strict'; 

angular.module('chariot').directive('modal', function() { 
    return { 
     template: '<div class="modal fade">' + 
     '<div class="modal-dialog">' + 
      '<div class="modal-content">' + 
       '<div class="modal-header">' + 
        '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
        '<h4 class="modal-title">{{ title }}</h4>' + 
       '</div>' + 
      '<div class="modal-body" ng-transclude></div>' + 
     '</div>' + 
     '</div>' + 
     '</div>', 
     restrict: 'E', 
     transclude: true, 
     replace:true, 
     scope:true, 
     link: function postLink(scope, element, attrs) { 
     scope.title = attrs.title; 

     scope.$watch(attrs.visible, function(value){ 
      if(value == true) 
       $(element).modal('show'); 
      else 
       $(element).modal('hide'); 
     }); 

     $(element).on('shown.bs.modal', function(){ 
      scope.$apply(function(){ 
       scope.$parent[attrs.visible] = true; 
      }); 
     }); 

     $(element).on('hidden.bs.modal', function(){ 
      scope.$apply(function(){ 
       scope.$parent[attrs.visible] = false; 
      }); 
     }); 
     } 
    }; 
}); 

saatlerce bu şaşırıp! Kaybettiğim bir şey var mı? Herhangi bir fikir yararlı olacaktır.

Answer 1

$scope.showModal için basit bir değer değil nesne kullanmanız gerektiğini düşünüyorum. Örnek:

Denetleyici:

$scope.showModal = {visible: false}; 

$scope.toggleModal = function(){ 
    $scope.showModal.visible = !$scope.showModal.visible; 
}; 

Görünüm:

<input type="button" ng-click="toggleModal()" class="btn btn-default" value="Path">{{showModal}} 
<modal title="Select a Testcase" show-modal="showModal"> 
    <form role="form" > 
     <div class="form-group" style="padding: 5%"> 
      <div id="tree_div"></div> 
     </div> 
     <input type="button" value="Submit" class="btn btn-default"> 
    </form> 
</modal> 

Yönergesi: Eğer yönergesi itiraz bağlanınca

angular.module('chariot').directive('modal', function() { 
    return { 
     template: '<div class="modal fade">' + 
     '<div class="modal-dialog">' + 
      '<div class="modal-content">' + 
       '<div class="modal-header">' + 
        '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
        '<h4 class="modal-title">{{ title }}</h4>' + 
       '</div>' + 
      '<div class="modal-body" ng-transclude></div>' + 
     '</div>' + 
     '</div>' + 
     '</div>', 
     restrict: 'E', 
     transclude: true, 
     replace:true, 
     scope:{ 
      title: '@', 
      showModal: '=', 
     }, 
     link: function postLink(scope, element, attrs) { 
     if(typeof(scope.showModal.visible) === "undefined") { 
       scope.showModal.visible = false; 
     } 
     scope.$watch('showModal.visible', function(value){ 
      if(value == true) 
       $(element).modal('show'); 
      else 
       $(element).modal('hide'); 
     }); 

     $(element).on('shown.bs.modal', function(){ 
      scope.$apply(function(){ 
       scope.showModal.visible = true; 
      }); 
     }); 

     $(element).on('hidden.bs.modal', function(){ 
      scope.$apply(function(){ 
       scope.showModal.visible = false; 
      }); 
     }); 
     } 
    }; 
}); 

, yönerge gelen özelliklerini değiştirebilir ve bu değişiklikler kontrolöre de yansıtılacaktır.

Kodunuzdaki ek sorun, yönergesinin replace: true - görünümünüzde bildirdiğinizde <modal title="Select a Testcase" show-modal="showModal"> - Bu veri, yönerge html ile değiştirilecek ve özniteliği artık kullanılamaz hale getirecektir.

Doğrusu eşleme değiştirerek nitelikler yerine, kapsamdan değerleri almaya direktifini yapılan bu sorunu aşmak için: önerdi ve şimdi kalıcı bir kez bile gelmeyip ne değildir

scope:{ 
     title: '@', // Use the title attribute value as a string 
     showModal: '=', // use the "show-modal" attribute as an object 
    },