如何在我的情况下显示和隐藏元素

Question

我想创建一个指令模态，所以我可以在其他地方使用。

我希望模式在用户做某事时弹出。我用ng-show来隐藏它。

我的HTML

<my-modal ng-show="showModal" data-text="my text"></my-modal> 

我的指令

angular.module('myApp').directive('myModal', ['$modal', 
    function($modal) { 
     return { 
      restrict: 'E', 
      scope: false, 
      link: function(scope, elem, attrs) {    
       $modal({ 
        template: '<div>{{scope.attrs.text}}</div>' 
        scope: scope, 
       }); 
      } 
     }; 
    } 
]); 

我控制器

angular.module('myApp').controller('tCtrl', ['$scope', 
    function($scope) { 
     $scope.showModal = false; 
    } 
}]) 

出于某种原因，我不能隐藏模式，它总是弹出当第一次加载页面。如何在页面首次加载时成功隐藏它？谢谢您的帮助！

Answer 1

的链接功能，一旦该指令被加载运行，所以你的情况，如果你只是想显示你的模式一度$ scope.showModal = true，则必须修改指令：

angular.module('myApp').directive('myModal', ['$modal', 
    function($modal) { 
     return { 
      restrict: 'E', 
      scope: { 
       display: '=', 
      }, 
      link: function(scope, elem, attrs) {    

       scope.$watch('display', function(newVal, oldVal) { 
       if(newVal !== oldVal && newVal) { 
        $modal({ 
         template: '<div>{{scope.attrs.text}}</div>', 
         scope: scope 
        }); 
       } 
       }); 
      } 
     }; 
    } 
]); 

并将您的html更改为

<my-modal display="showModal" data-text="my text"></my-modal>