Question

假设我的文件结构如下：

的index.html：

<ng-header></ng-header>
<ng-body></ng-body>
<ng-footer></ng-footer>
<ng-modal></ng-modal>

当我打开index.html时，所有这些指令都被加载了，但是我不希望加载<ng-modal>直到我需要它。

我试着像这样做：

<ng-modal ng-if="showModal"></ng-modal>

然后我会在<ng-body>中的某处使用ng-click来打开这个模态：

scope.openModal = function() {
  scope.showModal = true;
  console.log("Modal is initialized")
}

然而，这个方法并不适合我，因为它只初始化ng-modal一次然后当你再次打开它时它已经加载并且不会执行我在模态中使用的任何http调用。

ngModal.js：

.directive('nuMeetingCreate', function($scope) {
  return {
     restrict: 'E',
     transclude: true,
     templateUrl: '../../../whatever.html',
     link: function(scope, element, attrs) {
       console.log("I am loaded"); // gets executed only once

       contacts.get({
         onSuccess: function success(response) {
           console.log("Contacts are loaded"); // this one gets called only once!       
         }, 
         onError: function error(response) {
           console.log(response)
         }
      });
     }
  }
})

Answer 1

如果您正在使用Foundation，那么您应该使用他们的$ modal服务。在加载文档时，不需要预定义模态div。调用服务时，模板内容将从模板呈现。您可以使用基于文件的模板或内联模板。

防止在加载时调用角度指令

1 个答案: