AngularJS - controller inside 指令仅针对多次使用的一阶导数调用

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

我在同一页面上多次使用指令时遇到问题,如果在一个页面上多次定义指令,它只会调用一次。

可运行演示: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"/>

问题出在using指令中,应该正确关闭。

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