CODEWITHSUNDEEP
angularjsangularjs-directive
luiquao
luiquao

Reputation: 1114

Prevent angular directive from being called on load

Say I have a file structured like this:

index.html:

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

All these directives are being loaded when I open up my index.html, however I dont want <ng-modal> to be loaded until I need it to be.

I tried to do smth like this:

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

and then I would use ng-click somewhere in <ng-body> to open up this modal:

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

However this method is not really working for me because it initializes ng-modal only once and then when you open it again its already loaded and wont execute any http calls that I use in my modal.

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

Upvotes: 0

Views: 730

Answers (1)

Mike Feltman
Mike Feltman

Reputation: 5176

If you're using Foundation then you should make use of their $modal service. There shouldn't be any need to predefine the modal div at the time the document is loaded. The modal content is rendered from a template when the service is called. You can use either a file based template or an inline template.

Upvotes: 1

Related Questions