Javascript 无法获得再次弹出的模式-AngularJS

我目前正在向AngularJS做自我介绍，我正在为一个按钮编写代码，当点击按钮时会弹出一个模式。模型弹出得很好。当我点击模态上的“X”时，它也会消失。布尔值，当设置为false以使模态弹出再次变为true时，一切都会顺利进行，但模态不会再次弹出。为什么会这样

HTML:

指令：

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

“严格使用”；
角度。模块（'cariot'）。指令（'modal'，函数（）{
返回{
模板：“”+
'' +
'' +
'' +
“×；”+
“{{title}}”+
'' +
'' +
'' +
'' +
'',
限制：'E'，
是的，
替换：正确，
范围：正确，
链接：函数postLink（范围、元素、属性）{
scope.title=attrs.title；
范围$watch（属性可见，函数（值）{
如果（值==true）
$（元素）.modal（'show'）；
其他的
$（元素）.modal（'hide'）；
});
$（element）.on（'show.bs.modal'，function（）{
作用域$apply（函数（）{
scope.$parent[attrs.visible]=true；
});
});
$（element）.on（'hidden.bs.modal'，function（）{
作用域$apply（函数（）{
scope.$parent[attrs.visible]=false；
});
});
}
};
});

---

我被困在这几个小时了！有什么我遗漏的吗？任何见解都会有所帮助。谢谢

我认为您应该为

$scope.showmodel

使用对象而不是简单值。例如：

控制器：

$scope.showModal =  {visible: false};

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

视图：

---

我尝试了你的建议，现在模态甚至一次也没有出现。让我检查一下jsfiddle@SaniKul你现在能查一下吗？我将指令范围从

title:'='，

更改为

title:'@'，

@SaniKul我尽可能多地添加了内容（我认为），我的英语并不完美，所以我希望这很清楚，因为它非常有用！非常感谢你！

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

$scope.showModal =  {visible: false};

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

<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>

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;
            });
         });
      }
   };
});

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