我试着写在这里列出的网格元素有点DSL:的http:// foundation.zurb.com/docs/grid.php
基本上是我希望做的是
<排> <列两个移动一> {{}会将myText}< / COL> <一列有手机为中心的三><输入类型=文本NG模型=会将myText>< /输入>< / COL>< /行>
转变为:
< DIV CLASS =行> < DIV CLASS =列两个移动一> {{}会将myText}< / DIV> < DIV CLASS =列4为中心的移动三><输入类型=文本NG模型=会将myText>< /输入>< / DIV>< / DIV>
在理想情况下,我希望写的东西,可以采取任意嵌套:行 - >山口 - >行 - >山口 - >行......
我有麻烦的第一步正确的 - 嵌套的元素,因为我不能挺数字如何如何让孩子元素融入到另一个模板,而不严重损害编译过程。
VAR应用= angular.module(青金石,[]); app.directive('行',函数(){ 返回{ 限制:'E', 编译:功能(tElement,ATTRS){ VAR内容= tElement.children(); tElement.replaceWith( $('',{类:行,})追加(内容)); } } });
只是没有做任何事情。失败的尝试显示在这里 - http://jsfiddle.net/ZVuRQ/
请帮帮忙!
解决方案我希望不要用NG-transclude,因为我发现它增加了一个额外的范围。
下面是一种不使用纳克 - transclude一个指令:
app.directive('行',函数(){ 返回{ 限制:'E', 编译:功能(tElement,ATTRS){ VAR内容= angular.element('< DIV CLASS =行>< / DIV>') content.append(tElement.children()); tElement.replaceWith(内容); } }});
您可能需要使用tElement.contents()而不是tElement.children()。
I'm trying to write a little dsl around the grid elements outlined here: http://foundation.zurb.com/docs/grid.php
basically what I wish to do is to
<row>
<column two mobile-one>{{myText}}</col>
<column four centered mobile-three><input type="text" ng-model="myText"></input></col>
</row>
transform into:
<div class="row">
<div class="columns two mobile-one">{{myText}}</div>
<div class= "columns four centered mobile-three"><input type="text" ng-model="myText"></input></div>
</div>
Ideally, I wish to write something that can take arbitrary nesting: row -> col -> row -> col -> row.....
I am having trouble getting the first step right - nesting the elements because I can't quite figure how how to get the child elements into another template without seriously compromising the compilation process.
var app = angular.module('lapis', []); app.directive('row', function(){ return { restrict: 'E', compile: function(tElement, attrs) { var content = tElement.children(); tElement.replaceWith( $('', {class: 'row',}).append(content)); } } });
just does not do anything. The failed attempt is shown here - http://jsfiddle.net/ZVuRQ/
Please help!
解决方案I was hoping not to use ng-transclude because I found that it added an additional scope.
Here is a directive that does not use ng-transclude:
app.directive('row', function() {
return {
restrict: 'E',
compile: function(tElement, attrs) {
var content = angular.element('<div class="row"></div>')
content.append(tElement.children());
tElement.replaceWith(content);
}
}
});
You may want to use tElement.contents() instead of tElement.children().
上一篇:从AngularJS单个$ http请求多的承诺AngularJS、http
下一篇:停止AngularJS插入LT&;跨度类=&QUOT; NG-范围&QUOT;&GT;&LT; / SPAN&GT;采用NG-包括:跨度、范围、AngularJS、LT