Директива, ссылающаяся на свой собственный идентификатор

Question

Я использовал директиву для использования диалогов jqueryUI.

app.directive('popUp', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      myId: '@', 
      onCancel: '&' 
     }, 
     template: 
      '<div id="{{myId}}"> 
       <button ng-click="onCancel()">...</button> 
       ... 
      </div>' 
     link: function(scope, element, attrs) { 
      scope.closeDialog = function() { 
       $("#" + id).dialog('close'); 
      } 
      // question 1: how to reference id of this directive (self)? 
      // question 2: should it be here, in compile, or in directive controller? 
      // question 3: 'ng-click=closeDialog()' missing when popup element inspected in firebug/dev tool 
      // question 4: is there a way to avoid jquery like selector $("#" + id) to reference this element? 
     }    
    }; 
}); 

И это HTML:

<pop-up my-id="success" on-cancel="closeDialog()"> ... </pop-up> 

Если я объявляю внешний контроллер и closeDialog функцию, прикрепленную к его $scope, это работает отлично, как это:

app.controller('DialogCtrl', function($scope) { 

    $scope.closeDialog = function(id) { 
     $("#" + id).dialog('close'); 
    }; 

}); 

HTML

<div ng-controller="DialogCtrl"> 
    <pop-up my-id="success" on-cancel="closeDialog('success')"> ... </pop-up> 
</div> 

Но я хочу избежать избыточности id. Поэтому я хочу, чтобы директива имела свою собственную функцию закрытия. Если у вас также есть ответы на другие вопросы выше, это очень ценится. Благодарю.

Answer 1

Это, по сути, то, что вы хотите. Нет необходимости использовать $ селекторов и идентификаторов, чтобы найти ваше диалоговое окно с element в функции ссылки даст вам ссылку на элемент, к которому применяется директива.

Определите функцию closeDialog в области действия директивы, и вы можете ссылаться на нее из шаблона директивы. Каждый экземпляр директивы будет иметь свою собственную функцию закрытия.

app.directive('popUp', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      myId: '@' 
     }, 
     template: 
      '<div id="{{myId}}"> 
       <button ng-click="closeDialog()">...</button> 
       ... 
      </div>' 
     link: function(scope, element, attrs) { 
      // initialise dialog 
      element.dialog(); 

      // the template's ng-click will call this 
      scope.closeDialog = function() { 
       element.dialog('close'); 
      }; 
     }    
    }; 
}); 

Не требуется атрибут on-cancel.

<pop-up my-id="success"></pop-up>