编程角度模板？答案

【问题标题】：Programmatic Angular Templates?编程角度模板？
【发布时间】：2013-06-05 23:09:10
【问题描述】：

我正在开发一个使用 Angular.js 的项目，以及一个基于 jQuery 的自定义控件，该控件使用事件相关的数据触发事件；我希望能够在 Angular 中监听该事件（足够简单），然后显示一个对话框，其中包含一个绑定到该数据的模板，以便在对话框中更改值时，它们会自动反映在对象中与事件一起发送。

我不确定如何在 Angular 中执行此操作，如何按需渲染绑定到数据对象的模板。

例如；控件使用被点击的可视对象的数据触发“点击”。我希望 Angular 监听，然后从文件（例如“menuDialog.html”）呈现模板的内容，以便我可以将其放置在我单击的屏幕上（我可以进行放置）。

我读过指令是要走的路，但这似乎是用于处理自定义 HTML 标记或属性。在这里同样适用吗？我将如何以编程方式调用指令、对其进行数据绑定并获取要放在页面上的内容？

我会确切地知道如何在 Backbone+Handlebars 中实现这一点，但我对 Angular 不太熟悉。

谢谢

【问题讨论】：

标签： events templates angularjs angularjs-directive

【解决方案1】：

控制器：

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

标记：

<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)>
      });
    }
  }
})

请注意，html 中的任何指令都将在调用$compile 期间进行处理。

【讨论】：

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

【解决方案2】：

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

创建一个指令来处理由自定义 jquery 控件引发的事件。 Angular 本身支持像 ng-click 这样的事件指令，但我不确定它是否会在你的 jquery 控件生成自定义标记的情况下工作。
您的控制器应该包含一个属性（javasript 对象），其中包含您需要显示的弹出窗口的模型 + 一个布尔属性来表示何时显示模型

$scope.popupModel=null; $scope.showPopup=false;
你的 html 应该使用 ng-include 来包含你的模板 html。 ng-include 支持使用脚本标签来自服务器和客户端的模板。
模板 html 代码应绑定到属性 popupModel。

在指令定义中，使用对象哈希语法添加一个范围属性，该语法将两种方式绑定到控制器范围属性 popupModel 和 showPopup。类似的东西

directive('htmlTemplate', function($compile) {

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

只要shopPopup 为真，就会显示弹出窗口。这可以通过ng-show 完成。

我建议你开始深入挖掘指令和ng-include。

【讨论】：