如何编写自定义“行”和“山口”元素angularjs [英] how to write custom 'row' and 'col' element for angularjs

问题描述

我试着写在这里列出的网格元素有点DSL：的http：// foundation.zurb.com/docs/grid.php

基本上是我希望做的是

 ＆LT;排＆GT;
  ＆LT;列两个移动一＆GT; {{}会将myText}＆LT; / COL＆GT;
  ＆LT;一列有手机为中心的三＆GT;＆LT;输入类型=文本NG模型=会将myText＆GT;＆LT; /输入＆GT;＆LT; / COL＆GT;
＆LT; /行＆GT;
 

转变为：

 ＆LT; D​​IV CLASS =行＆GT;
  ＆LT; D​​IV CLASS =列两个移动一＆GT; {{}会将myText}＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =列4为中心的移动三＆GT;＆LT;输入类型=文本NG模型=会将myText＆GT;＆LT; /输入＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

在理想情况下，我希望写的东西，可以采取任意嵌套：行 - >山口 - >行 - >山口 - >行......

我有麻烦的第一步正确的 - 嵌套的元素，因为我不能挺数字如何如何让孩子元素融入到另一个模板，而不严重损害编译过程。

  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（'＆LT; D​​IV CLASS =行＆GT;＆LT; / DIV＆GT;'）
            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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！