我目前正在向AngularJS自我介绍,我正在为按钮编写代码,单击该按钮会弹出一个模式。模态很好地弹出。当我单击模态上的“ X”时,它也会消失。当设置为false以便使模态弹出时再次变为真的布尔值,一切顺利进行,但是模态第二次不弹出。为什么会这样呢?

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


指示:

'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使用对象而不是简单的值。例:

控制器:

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


当您将对象绑定到指令时,可以从指令更改其属性,这些更改也将反映到控制器。

代码的另一个问题是它的指令具有replace: true-因此,当您在视图中声明<modal title="Select a Testcase" show-modal="showModal">-此数据将被指令html替换,并使该属性不再可用。

为了克服这个问题,我制定了指令来通过更改映射从作用域而不是属性中获取值:

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

07-24 09:50
查看更多