程式角度模板？ [英] Programmatic Angular Templates?

问题描述

我正在使用一个使用Angular.js的项目，以及一个基于jQuery的自定义控件，该事件触发与事件相关的数据的事件;我想能够以角度（足够容易）收听该事件，然后显示一个与该数据绑定的模板的对话框，以便当对话框中的值发生更改时，它们将自动反映在对象中与事件一起发送。

我不知道如何在Angular中执行此操作，如何根据需要呈现绑定到数据对象的模板。 p>

例如控件用点击的视觉对象的数据触发点击。我想要Angular听，然后从文件（例如menuDialog.html）中渲染模板的内容，以便我可以将其放在我点击的屏幕上（我可以做放置）。

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

我会知道如何实现这在Backbone + Handlebars中，但我不太熟悉Angular。

谢谢

解决方案

控制器：

  .controller（'MyCtrl'，function（$ scope）{
 $ scope.html ='< div> testing< / div>'; //或使用$ 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）; 
< ;用newElement做的东西（这是一个jQuery元素）> 
}）; 
} 
} 
}）
  

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

I am working on a project that uses Angular.js, and a custom jQuery-based control that fires an event with the data that the event pertains to; I want to be able to listen to that event in Angular (easy enough) and then show a dialog box with a template that's bound to that data, so that when the values are changed in the dialog, they are automatically reflected in the object that was sent along with the event.

I'm not sure how to do this in Angular, how to render a template on demand that's bound to a data object.

For example; the control fires "clicked" with the data of the visual object that was clicked. I want Angular to listen, then render the contents of a template from a file (ex. "menuDialog.html") so that I can then place it on the screen where I clicked (I can do the placing).

I've read directives are the way to go, but that seems to be for handling custom HTML tags or attributes. Would the same apply here, and how would I programmatically call a directive, data bind it and get the contents to put on the page?

I would know exactly how to implement this in Backbone+Handlebars, but I'm not too familiar with Angular.

Thanks

解决方案

The controller:

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

The markup:

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

The directive:

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

Note that any directives in the html will be processed during the call to $compile.

这篇关于程式角度模板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！