AngularJS – controller inside directive is called only for rthe first deiretive if used multiple times

Issue

I have a problem using directive multiple times on same page, if directive is defined multiple times on a page it calling only once.

Runnable demo: https://codepen.io/predatorz/pen/XWmPJwj

angular.module('DemoApp.directives', []).
  directive('popupDirective', function () {
      return {
      scope: {
        visible: '=?',
      },
      restrict: 'EA',
      template: '<div dx-popup="popupOptions"></div>',
      link: function (scope, elem, attrs) {
        scope.visible = scope.visible || false;
      },
      controller: function($scope){  
         console.log('controller is called');
         $scope.popupOptions = {
            width: 300,
            height: 250,
            showTitle: true,  
            title: 'Information',
            bindingOptions: {
                visible: "visible",
            }
        };
      }
    };
});

html:

<popup-directive visible="visiblePopup"/>
<popup-directive visible="visiblePopup2"/>

Solution

The issue was in using directive, it should be closed properly.

<popup-directive visible="visiblePopup"></popup-directive> 
<popup-directive visible="visiblePopup2"></popup-directive>

Answered By – Andrey

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0