AngularJS教学中绑定策略的实例分析

本文阐述了AngularJS指令中的绑定策略。分享给大家参考，如下：

在前一篇文章中，我们知道了如何通过指令生成独立的作用域。在本节中，我们将仔细研究范围内的绑定策略。

一般来说，有三种范围约束策略：

(1)@ :绑定字符串

(2)=与父控制器双向绑定

(3):用于调用父作用域中的函数

1.基本方法

test word=' { { WordCTRL } } '/test app . controller(' my controller 1 '，['$scope '，function($ scope){ $ scope . WordCTRL=' hello '；}]);app.directive('test '，function(){ return { restrict : ' E '，template:'div{{word}}/div '，link:function(scope，ele，attr){ scope . word=attr . word；} }});显示效果：

这是最基本的方法，实现了范围内字符串的绑定

2.其实我们可以重写上面的方法。

app.directive('test '，function(){ return { restrict : ' E '，scope:{ word:'@' }，template:'div{{word}}/div '，} })；通过删除链接函数并添加@ binding，指令中的属性可以成功绑定到指令范围的字符串。

3.='绑定

如果使用=binding，不仅可以改变指令中范围内的值，还可以改变父控制器中的值，实现双向绑定。

示例：

div span ctrl :/span input ng-model=' Wordctrl '/div test word=' { { Wordctrl } } '/test PP . directive(' test '，function(){ return { restrict : ' E '，scope:{ word:'@' }，template : ' directive : input ng-model=' word '/'，})；效果是改变指令中作用域的值也会改变控制器中对应变量的值，从而实现控制器与指令中作用域的双向绑定。

效果如下：

3.''方法

test greet=' say hello()'/test app . directive(' test '，function(){ return { restrict : ' e '，scope: {greet:''}，template 3360 ' div ng-click=' say hello({ name : ')注意传递参数的方法。

更多对AngularJS感兴趣的读者可以查看本网站的主题：《AngularJS入门与进阶教程》和《AngularJS MVC架构总结》

希望本文对AngularJS编程有所帮助。