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（您调用＆＃34; popup＆＃34 ）：

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

指令

1 个答案: