angularjs – ng-click在使用嵌套指令时首次使用$compile后停止

问题：此代码段有效,但仅适用于模态的第一个生命周期.所以我可以发射模态,关闭模态并再次发射它.但是一旦模态打开,第二次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>