Events 编程角度模板？

我正在处理一个使用Angular.js的项目，以及一个基于jQuery的自定义控件，该控件使用事件所属的数据触发事件；我希望能够以角度（足够简单）收听该事件，然后显示一个带有绑定到该数据的模板的对话框，以便在对话框中更改值时，它们会自动反映在随事件一起发送的对象中

我不知道如何在Angular中做到这一点，如何根据需要呈现绑定到数据对象的模板

比如,；控件使用单击的可视对象的数据触发“单击”。我想先听一听，然后从一个文件（例如“menuDialog.html”）中呈现模板的内容，这样我就可以将它放在我单击的屏幕上（我可以进行放置）

我已经阅读了指令，但这似乎是用于处理自定义HTML标记或属性的。这里是否也适用于此，我如何以编程方式调用指令、数据绑定它并获取要放在页面上的内容

我完全知道如何在主干+把手中实现这一点，但我对Angular不太熟悉

感谢控制器：

.controller('MyCtrl', function($scope) {
  $scope.html = '<div>testing</div>'; // or use $http to fetch remotely
})

.controller（'MyCtrl'，函数（$scope）{
$scope.html='testing'；//或使用$http远程获取
})

标记：

<div html-template="html"></div>

该指令：

.directive('htmlTemplate', function($compile) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      element.click(function() {
        var html = scope.$eval(attrs.htmlTemplate);
        var newElement = $compile(html)(scope);
        <do stuff with newElement (it's a jQuery element)>
      });
    }
  }
})

指令（'htmlTemplate'，函数（$compile）{ 返回{ 限制：“A”， 链接：函数（范围、元素、属性）{ 元素。单击（函数（）{ var html=scope.$eval（attrs.htmlTemplate）； var newElement=$compile（html）（范围）；

---

根据我对问题的理解，这里是你需要做的

创建一个指令来处理自定义jquery控件引发的事件。Angular本身支持事件指令，如

ng click

，但我不确定在jquery控件生成自定义标记的情况下它是否有效

控制器应包含一个属性（javasript对象），该属性包含需要显示的弹出窗口的模型+一个布尔属性，以指示何时显示模型

$scope.popupModel=null； $scope.showPopup=false

html应该使用

ng include

来包含模板html。

ng include

支持使用脚本标记从服务器和客户端创建模板

模板html代码应绑定到属性

popupModel

在指令定义中，使用对象哈希语法添加一个作用域属性，该语法将两种方式绑定到控制器作用域属性popupModel和showPopup

指令（'htmlTemplate'，函数（$compile）{

只要

shopppopup

为真，就会显示弹出窗口。这可以通过

ng show

完成

---

我建议您开始深入研究指令，并且

ng include

如何以编程方式调用该指令？我没有任何HTML。例如，我有$（某物）。在（'click'，函数（e，data）{//我想在这里调用该指令（这个块可以在控制器中，但是我如何在没有HTML的情况下调用指令？}）；基本上，我正在尝试的是，当触发事件时，加载并呈现一个新模板。在主干中，我将有一个事件，然后调用Handlebar加载并呈现一个模板，然后将其添加到页面，并将我的事件绑定到模板中的控件。$（任意）不应该在控制器中，它应该在指令中。好的，但是如果我不需要在页面上放置指令怎么办？我是否需要在应用程序中的任何位置放置一个或类似的标记？我需要能够根据单击的内容将模板中的html放置在不同的位置。指令是操作和标记之间的链接。这操作听起来更像是“ng click”类型的指令-我已相应地更新了答案。请注意，如果在加载Angular之前加载jQuery，则传入的“element”参数是完整的jQuery元素。@jeremy yes，ok，这样更有意义。

  return {
    restrict: 'A',
    scope:{model=@popupModel,show=@showPopup},
    link: function (scope, element, attrs) {
          element.click(function(e) {
               model=e.model;
               show-true;
          });
    }
})