Question

我有一个使用helper / wrapper指令的Angular模态指令。这样我总是可以使用相同的包装器，只需在不同的模态内容中加载不同的模板。

问题：此代码段有效，但仅适用于模式的第一个生命周期。所以我可以发射模态，关闭模态并再次发射它。但是一旦模态打开，第二次ng-click指令都不起作用。任何提示都只是超级。

用法

<button my-modal="views/login.html">Launch Login-specific Modal</button>

指令模块（app.js）

angular.module('myModal',[])

.directive('modalWrapper', function(){
  return {
    replace: true,
    templateUrl: 'views/modal.html',
    controller: function($scope, $element){
      $scope.close = function(){
        $element.remove();
      };
      // NOTE: I use this array to showcase that ng-repeat still works the second time although ng-click stops functioning properly.
      $scope.others = ["One", "Two", "Three"];
    }
  }
})

.directive('myModal', function( $compile){

      function link(scope, element, attr){

      scope.partial = attr.myModal; // NOTE: Loads sub template via ng-include

      var ngModal = $compile('<div modal-wrapper></div>')(scope);

      element.on('click', function(){
        angular.element('body').append(ngModal);
      });

      scope.yo = function(){
        alert("Yo from inside template.");
      };

    }

    return {
      link: link,
      scope: {}
    }
});

模板

modal.html

<div class="my-modal">
    <p>Modal Wrapper</p>
    <div ng-include="partial"></div>
  <button ng-click="close()">Close</button>
  <p>This just proves that other directives still work (ng-repeat), but ng-click does not.</p>
  <div ng-repeat="stuff in others">
    <p>{{stuff}}</p>
  </div>
</div>

的login.html

<h1>Well hey there, I'm the login template.</h1>
<button ng-click="yo()">Say Yo</button>

Answer 1

我认为问题在于你正在破坏编译ng-click的范围。

调用scope.close()时，会出现$element.remove()。这两者都从DOM中删除了元素，并破坏了它附加的范围。这将导致您的ng-click被取消注册。

不幸的是（截至上次我检查过），element.detach()也会破坏范围，所以最好的办法是将元素编译并附加到body只有一次。在此之后，您可以使用element.show()和element.hide()来显示和隐藏模态。或者，您可以在每次要显示时重新编译模态。

使用嵌套指令时，首次使用$ compile后，ng-click停止工作

1 个答案: