angularjs自定义尼日利亚模型标签的属性

有的时候我们需要为非投入类型的元素添加尼日利亚模型来实现双向的数据绑定，从而减少冗余代码，那么可以尝试一下的方式

例如：我页面中使用了内容可编辑这个属性来实现用户可直接编译的差异元素

html:

风格。文本{ margin:0 auto宽度宽度：100像素高度：50 pxborder:1px纯红；}/style/head dydiv ng-controller=' select controller ' div ng-repeat=' pop in city list ' div class=' text '内容可编辑=' true ' ng-model=' pop。pop '/div/div按钮ng-click=' cs()'输出新数据/按钮/div/正文但是直接绑定尼日利亚模型是肯定得不到数据的，这时就需要为其增加自定义的属性，如下所示。

js:

脚本var app=angular.module('app '，[])；app。控制器(' select controller '，function($ scope){ $ scope。城市列表=[{ id :1，pop: '北京}，{id:1，pop: '上海}，{id:1，pop: '广州'}];$ scope。p={ }；$ scope。cs=function(){控制台。日志($ scope)。城市列表)；} }).指令(“contenteditable”，function() {//自定义ngModel的属性可以用在差异等其他元素中返回{ restrict: 'A '，//作为属性使用需要： '?'' ngModel '，//此指令所代替的函数link:函数（作用域、元素、属性、n model){ if(！ng模型){ return} //如果没有ng模型就什么都不做//指定用户界面应该如何更新ngModel .$ render=function(){ element。html(ng模型.$ ViewValue | | ' ')；};//侦听更改事件以启用绑定元素on('模糊按键变化'，函数(){ scope .$ apply(ReadViewText)；});//无需初始化，AngularJS将基于ng模型属性初始化文本//将数据写入模型函数readViewText(){ var html=element。html()；//当我们清除可编辑的内容时，浏览器会留下一个br/如果提供了条形br属性，那么如果(attrs。strip br html==' br '){ html=' '；} ngModel .$ SetViewValue(html)；} } };})/脚本其中参数类别如下：

部分参数解释

限制：

（字符串)可选参数，指明指令在数字正射影像图里面以什么形式被声明；

取值有：E(元素)，A(属性)，C(类)，M(注释),其中默认值为a；

(e)元素):方向名称/方向名称（属性):div directioname=' expression '/DivC(类):div class='directiveName'/divM(注释):-方向：方向名称表达式-

2 .要求

字符串代表另一个指令的名字，它将会作为环函数的第四个参数

具体用法我们可以举个例子说明

假设现在我们要编写两个指令，两个指令中的环链接函数中（链接函数后面会讲)存在有很多重合的方法，

这时候我们就可以将这些重复的方法写在第三个指令的控制器中（上面也讲到控制器经常用来提供指令间的复用行为)

然后在这两个指令中，要求这个拥有控制器字段的的指令（第三个指令),

最后通过环链接函数的第四个参数就可以引用这些重合的方法了。

！doctype html html ng-app=' myApp ' head script src=' http :http://cdn。静态文件。组织/角度。js/1。2 .10/棱角分明。量滴js '/script/head dy外部指令内部指令/内部指令2/内部指令2/外部指令脚本var app=angular。模块(' myApp '，[])；app。指令(' OuteDireCt '，函数(){ return { scope : }，restrict: 'AE '，控制器： function($ scope){ this。say=function(某些指令){ console。日志('得到： '一些方向。消息)；};} };});app.directive('innerDirective '，function(){ return { scope : } }，restrict: 'AE '，required : '^outerdirective',link:函数(scope，elem，attrs，controller实例){ scope。留言='嗨，雷峰'；controllerInstance.say(范围);} };});app。方向('内部指令2 '，函数(){ return { scope : } }，restrict: 'AE '，要求： '^outerdirective',link:函数(scope，elem，attrs，controller实例){ scope。消息='嗨，舒舒；controllerInstance.say(范围);} };});/脚本/正文/html上面例子中的指令innerDirective和指令内部方向2复用了定义在指令外部指令的控制器中的方法

也进一步说明了，指令中的控制器是用来让不同指令间通信用的。

另外我们可以在需要的参数值加上下面的某个前缀，这会改变查找控制器的行为：

(1)没有前缀，指令会在自身提供的控制器中进行查找，如果找不到任何控制器，则会抛出一个错误

(2)?如果在当前的指令没有找到所需的控制器，则会将空传给环连接函数的第四个参数

(3)^如果在当前的指令没有找到所需的控制器，则会查找父元素的控制器

(4)?^组合