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

我有一个角度模态指令，它使用helper/wrapper指令。这样，我就可以始终使用相同的包装器，只需在需要不同模式内容的地方加载不同的模板

问题：此代码段有效，但仅适用于模态的第一个生命周期。所以我可以启动模态，关闭模态，然后再次启动它。但是，一旦模态第二次打开，所有ng click指令都不起作用。任何提示都是非常好的

用法

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

启动登录特定模式

指令模块（app.js）

angular.module（'myModal'，[]）
.directive（'modalWrapper'，function（）{
返回{
替换：正确，
templateUrl:'views/modal.html'，
控制器：函数（$scope$element）{
$scope.close=函数（）{
$element.remove（）；
};
//注意：我使用这个数组来展示ng repeat第二次仍然可以工作，尽管ng click停止正常工作。
$scope.others=[“一”、“二”、“三”]；
}
}
})
.directive（'myModal'，函数（$compile）{
功能链接（范围、元素、属性）{
scope.partial=attr.myModal；//注意：通过ng include加载子模板
变量ngModal=$compile（“”）（范围）；
元素上（'click'，function（））{
angular.element（'body'）.append（ngModal）；
});
scope.yo=函数（）{
警报（“Yo来自模板内部”）；
};
}
返回{
链接：链接，
作用域：{}
}
});

模板

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>

模态包装器

接近
这只是证明了其他指令仍然有效（ng repeat），但ng click不起作用

{{stuff}}

login.html

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

嘿，我是登录模板。
说哟

我认为问题在于您正在破坏编译

ng click

的作用域

调用

scope.close（）

时，会出现

$element.remove（）

。这既从DOM中删除了元素，又破坏了它所附加的作用域。这将导致您的

ng单击被取消注册

不幸的是（在我上次检查时），
element.detach（）
也会破坏作用域，所以最好只编译一次元素并将其附加到主体中。在此之后，您可以使用
element.show（）
和
element.hide（）
来显示和隐藏模式。或者，您可以在每次需要显示时重新编译模式。
我可以在再次运行指令时重新编译，但我很好奇上面的代码为什么没有重新编译。在上面的代码中，当您执行
$element.remove（）
时，
指令包装器的作用域将被销毁，事件等将被清除。然后，当您将模态附加回
主体
时，您将带回一个已处理的元素。虽然我真的很想每次都重新创建它，但我觉得显示/隐藏是一种黑客行为，它确实起作用。感谢您的帮助和输入@andyroogerth如果您遇到问题，这一行应该可以在click事件中完成重新创建：
angular.element（'body'）.append（'compile（''）（scope））
<h1>Well hey there, I'm the login template.</h1>
<button ng-click="yo()">Say Yo</button>