产生不同的领域取决于angularjs DOM元素 [英] Generate different fields depends on DOM elements in angularjs
问题描述
所以我有一个应该采取一个页面，其中包含不同的自定义指令的HTML应用程序。
和还有另一个网页，其中将根据自定义指令（CMS-输入）的数量装载的第一页的HTML和生成输入字段存在于第一页，并指定的类型
因此，例如这里的第一个HTML页面
＆LT; CMS输入型=文本大小= '14'默认为'头'的标签='头'＆GT;＆LT; / CMS：输入＆GT;＆LT; CMS输入型=文本框大小= '50'默认='段落'的标签='段落'＆GT; ＆LT; / CMS：输入＆GT;
第二页应该加载第一页并生成字段：
＆LT;标签＆gt;页眉和LT; /标签＆gt;
＆LT;输入类型='文本'值='头'＆GT;
＆LT;标签＆gt;＆段LT; /标签＆gt;
＆LT; TextArea＆GT;＆段LT; / textarea的＆GT;
多数民众赞成什么指令是专为，关键是要弄清楚传递和评估领域的那些属性最好的方式，在plnkr我犯了一个可能的解决方案。
在这里，你有一个出发点：
PLNKR
app.directive（'cmsInput'，函数（）{\r
返回{\r
限制：'E'，\r
模板：'＆LT;标签NG-IF =（存在（标签））＆GT; {{标签}}＆LT; /标签＆gt;，\r
控制器：函数（$范围）{\r
$ scope.exists =函数（）{\r
如果（一个或放大器;＆放大器;则为a.length大于0）{\r
返回true;\r
}\r
返回false;\r
}\r
}，\r
链接：功能（范围，ELEM，ATTR）{\r
\r
scope.label = attr.label;\r
\r
}\r
\r
}\r
\r
}） \r
它需要的工作，但你会得到点。
编辑：
你可以使用的指令范围字段绑定值，但寻找解决办法的目的，我想让它尽可能明确。
EDIT2：
角指令是与在JavaScript（指令名）规则的驼峰定义为eaxctly驼峰，在HTML中，作为指令调用。
角匹配正确的js code到所谓的指令，准确地把在那个地方在DOM模板。一个链接方法的参数是属性，这些都是你在HTML有相同的价值观，所以在：
attr.label你在HTML获得标签的价值，在这种情况下，字符串头。
指令的模板属性是bindigs变量的范围分别设置和，当我们结合到一起，我们得到的字符串：
- 角发现指令
- 指令code是被解雇
- Link功能是被称为 - 这里面我们设为场名为标签属性的值命名为标签
- 模板编译 - 下{{}}标记正确的变量被设置 。
- vio'la - 替代该CMS-input元素你会得到正常的HTML
So i have an application that should take the html of one page which contains different custom directives.
and there is another page which will load the html of the first page and generate input fields according to the number of the custom directive (cms-input) existing in the first page and to the type specified.
so for example here is the first html page
<cms-input type='text' size='14' default='header' label='Header' ></cms:input>
<cms-input type='textfield' size='50' default='paragraph' label='Paragraph'> </cms:input>
the second page should load the first page and generate the fields :
<label>Header</label>
<input type='text' value='header'>
<label>Paragraph</label>
<textarea>paragraph</textarea>
Thats what directives are designed for, point is to figure out best way to pass and evaluate those attributes of fields, in plnkr i made a possible solution.
Here you have a starting point: PLNKR
app.directive('cmsInput', function() {
return {
restrict: 'E',
template: '<label ng-if=(exists(label))>{{label}}</label>',
controller: function($scope) {
$scope.exists = function(a) {
if(a && a.length>0) {
return true;
}
return false;
}
},
link: function(scope, elem, attr) {
scope.label = attr.label;
}
}
})
It requires work, but you'll get the point.
EDIT: You could use 'scope' field of directives to bind values, but for purpose of finding solution I wanted to make it as clear as possible.
EDIT2: Angular directive is being define with a rule "camelCase" in javascript(directive name) is eaxctly "camel-case" in html, as a directive call.
Angular matches correct js code to called directive and puts exactly in that place in DOM your template. One of the parameters of link method are attributes, those are the same values that you have in html, so under: 'attr.label' you get value of 'label' in html, in this case string "header".
The template attribute of directive is a string with bindigs to variables that were set in scope and and when we combine it all together we get:
- Angular "finds" a directive
- Directive code is being fired
- Link function is being called - inside which we set to field named "label" value of attribute named "label"
- Template compiles - under {{ }} markers correct variables are being set.
- vio'la - in place of this cms-input element you get normal html
这篇关于产生不同的领域取决于angularjs DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
