如何写一个“双”和“ntimes'指令为angularjs？ [英] how to write a 'double' and a 'ntimes' directive for angularjs?

问题描述

我无法理解ngRepeat'指令，所以我希望学习如何写一个'双'指令，然后用一个ntimes'指令扩展angularjs作品：
所以

双师型

 ＆LT;双＆GT;
 ＆LT; H1＆GT;的Hello World＆LT; / H1＆GT;
＆LT; /双＆GT;
 

将导致生产

 ＆LT; H1＆GT;的Hello World＆LT; / H1＆GT;
 ＆LT; H1＆GT;的Hello World＆LT; / H1＆GT;
 

'ntimes'

 ＆LT; ntimes重复= 10 -10
 ＆LT; H1＆GT;的Hello World＆LT; / H1＆GT;
＆LT; / ntimes＆GT;
 

将导致生产

 ＆LT; H1＆GT;的Hello World＆LT; / H1＆GT;
 .... 8次以上....
 ＆LT; H1＆GT;的Hello World＆LT; / H1＆GT;
 

解决方案

 ＆LT;双＆GT;
 ＆LT; H1＆GT;的Hello World  -  2'; / H1＆GT;
＆LT; /双＆GT;＆所述; ntimes重复= 10 -10
    ＆LT; H1＆GT;的Hello World  -  10 LT; / H1＆GT;
    ＆LT; H4＆GT;更多文字＆lt; / H4＆GT;
＆LT; / ntimes＆GT;
 

该指令下面将删除＆LT;双＆GT中，＆lt; /双＆GT中，＆lt; ntimes ...＆GT; 和＆LT; / ntimes＆GT; 标签：

  VAR应用= angular.module（'应用'，[]）;
app.directive（'双'，函数（）{
    返回{
        限制：'E'，
        编译：功能（tElement，ATTRS）{
            VAR内容= tElement.children（）;
            tElement.append（content.clone（））;
            tElement.replaceWith（tElement.children（））;
        }
    }
}）;
app.directive（'ntimes'，函数（）{
    返回{
        限制：'E'，
        编译：功能（tElement，ATTRS）{
            VAR内容= tElement.children（）;
            对于（VAR I = 0; I＆LT; attrs.repeat  -  1;我++）{
                tElement.append（content.clone（））;
            }
            tElement.replaceWith（tElement.children（））;
        }
    }
}）;
 

小提琴

我用一个编译函数，而不是一个链接功能，因为它似乎只要求模板DOM操作。

更新：我喜欢这个实施ntimes的编译功能更完善：

 编译：功能（tElement，ATTRS）{
    VAR内容= tElement.children（）;
    变种repeatedContent = content.clone（）;
    对于（VAR I = 2; I＆LT; = attrs.repeat;我++）{
        repeatedContent.append（content.clone（））;
    }
    tElement.replaceWith（repeatedContent）;
}
 

I am having trouble understand the 'ngRepeat' directive so I wish to learn how angularjs works by writing a 'double' directive and then extending with an 'ntimes' directive: so

'double'

<double>
 <h1>Hello World</h1>
</double>

would result in producing:

 <h1>Hello World</h1>
 <h1>Hello World</h1>

'ntimes'

<ntimes repeat=10>
 <h1>Hello World</h1>
</ntimes>

would result in producing:

 <h1>Hello World</h1> 
 .... 8 more times....
 <h1>Hello World</h1> 

解决方案

<double>
 <h1>Hello World - 2</h1>
</double>

<ntimes repeat=10>
    <h1>Hello World - 10</h1>
    <h4>More text</h4>
</ntimes>

The directives below will remove the <double>, </double>, <ntimes ...> and </ntimes> tags:

var app = angular.module('app', []);
app.directive('double', function() {
    return {
        restrict: 'E',
        compile: function(tElement, attrs) {
            var content = tElement.children();
            tElement.append(content.clone());
            tElement.replaceWith(tElement.children());
        }
    }
});
app.directive('ntimes', function() {
    return {
        restrict: 'E',
        compile: function(tElement, attrs) {
            var content = tElement.children();
            for (var i = 0; i < attrs.repeat - 1; i++) {
                tElement.append(content.clone());
            }
            tElement.replaceWith(tElement.children());
        }
    }
});​

Fiddle

I used a compile function rather than a linking function because it seemed like only template DOM manipulation was required.

Update: I like this implementation of the ntimes compile function better:

compile: function(tElement, attrs) {
    var content = tElement.children();
    var repeatedContent = content.clone();
    for (var i = 2; i <= attrs.repeat; i++) {
        repeatedContent.append(content.clone());
    }
    tElement.replaceWith(repeatedContent);
}

这篇关于如何写一个“双”和“ntimes'指令为angularjs？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！