更新时间:2023-02-09 19:51:11
多数民众赞成什么指令是专为,关键是要弄清楚传递和评估领域的那些属性***的方式,在plnkr我犯了一个可能的解决方案。
在这里,你有一个出发点:
PLNKR
app.directive('cmsInput',函数(){\r
返回{\r
限制:'E',\r
模板:'<标签NG-IF =(存在(标签))> {{标签}}< /标签>,\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变量的范围分别设置和,当我们结合到一起,我们得到的字符串:
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: