指令中的AngularJs DOM操作

Question

我有一條指令，該指令顯示用戶列表及其名稱作為鏈接。 在該指令的模板內，我有以下循環：

<ng-repeat="user in myctrl.users />
     <a href="" >{{user.name}}</a>

現在，我想向所有錨標記添加一個屬性指令，其名稱為edit-confirm-popup，如下所示。

<ng-repeat="user in myctrl.users />
     <a href="" edit-confirm-popup>{{user.name}}</a>

我想做的是，每當用戶單擊用戶名的鏈接時，我要顯示一個彈出窗口，其中插入了作為錨元素的同級彈出窗口的html。 我不想在編譯指令時重復彈出html，而是想在用戶單擊鏈接時動態插入它。
我能夠實現以下目標：
1）將click事件偵聽器附加到指令元素（即指令鏈接功能中的錨元素）上。
不知道
i）我應該如何插入模板？
ii）我希望當前用戶在事件偵聽器中可用，以便可以在顯示彈出窗口之前檢查一些條件。
這是我的指令代碼：

function editConfirmPopup() {

  function linkFunction(scope, iElement, iAttrs){
      console.log(iElement);
      iElement.on('click',function onEditUser(e){
         console.log(e);
         console.log('in event handler');
      });
  }
  var directiveDefinitionObject = {
    restrict: 'A',
    scope: {
       user: '=',
       populateUser : '&'
    },
    controller: 'UserEditConfirmController',
    controllerAs: 'userEdit',
    link : linkFunction,
    bindToController: true
  };

  return directiveDefinitionObject;
}

angular
    .module('mymodule')
    .directive('editConfirmPopup', editConfirmPopup);

Answer 1

ng-if指令有條件地附加（或刪除）-而不是僅顯示/隱藏其所操作的元素。

利用ng-repeat為每次迭代創建一個子作用域的事實，您可以僅使用一個簡單的切換變量來決定是否顯示/隱藏其他HTML（稱為“彈出”）：

<div ng-repeat="user in myctrl.users">
     <a ng-click="showPopup = !showPopup">{{user.name}}</a>
     <div ng-if="showPopup">
       The "popup" HTML
     </div>
</div>