angular指令中@,=,&的区别
来源:互联网 发布:战千雄源码 编辑:程序博客网 时间:2024/04/30 09:27
当directive中的scope设置为一个对象的时候,该指令就有了一个独立的作用域,AngularJS提供了一种绑定策略用于隔离作用域和外部作用域进行通信。
1、@(or @attr)
使用@符号可以进行单项的数据绑定,取值总是一个字符串,所以要用{{}}。
另外这也是一个单向的绑定,外部数据改变会反应到内部,但是内部数据变数据变化,外部不会变。
属性要用-连接,scope中写它的驼峰格式。
如果没有通过@attr指定属性名称,那么本地名称要与DOM属性的名称一致。
<!DOCTYPE html><html ng-app="myApp"><head><meta charset="utf-8"><title>AngularJS</title></head><body><div ng-controller="parent"><div><input type="text" ng-model="name"/></div><my-name show-name="{{name}}"></my-name></div></body><script type="text/javascript" src="angular.min.js"></script><script type="text/javascript">var app = angular.module("myApp", []);app.controller("parent", function($scope){$scope.name = "Jhon";}).directive("myName", function(){return {restrict:"EA",scope:{showName: '@'// name: '@showName'},template:'<input type="text" ng-model="showName"/>',// template:'<input type="text" ng-model="name"/>',}});</script></html>
2、= (or =attr)
使用=进行双向数据绑定,任何一方的值改变都会反应到另一方。因为是双向绑定,所以不要使用{{}},不然以下demo会报错。
属性要用-连接,scope中写它的驼峰格式。
如果没有通过@attr指定属性名称,那么本地名称要与DOM属性的名称一致。
<!DOCTYPE html><html ng-app="myApp"><head><meta charset="utf-8"><title>AngularJS</title></head><body><div ng-controller="parent"><div><input type="text" ng-model="name"/></div><my-name show-name="name"></my-name></div></body><script type="text/javascript" src="angular.min.js"></script><script type="text/javascript">var app = angular.module("myApp", []);app.controller("parent", function($scope){$scope.name = "Jhon";}).directive("myName", function(){return {restrict:"EA",scope:{showName: '='},template:'<input type="text" ng-model="showName"/>'}});</script></html>
3、&(or &attr)
&用来绑定外部的函数。
属性要用-连接,scope中写它的驼峰格式。
如果没有通过@attr指定属性名称,那么本地名称要与DOM属性的名称一致。
<!DOCTYPE html><html ng-app="myApp"><head><meta charset="utf-8"><title>AngularJS</title></head><body><div ng-controller="parent"><div><input type="text" ng-model="count"/></div><my-name show-name="increment()"></my-name></div></body><script type="text/javascript" src="angular.min.js"></script><script type="text/javascript">var app = angular.module("myApp", []);app.controller("parent", function($scope){$scope.count = 0;$scope.increment = function(){$scope.count++;};}).directive("myName", function(){return {restrict:"EA",scope:{showName: '&'},template:'<input type="button" ng-click="showName()" value="+1"/>'}});</script></html>
0 0
- angular指令中@,=,&的区别
- 关于angular中内置指令的介绍
- angular指令中scope的绑定策略
- angular的基本指令
- angular的指令
- Angular强大的指令
- Angular的内置指令
- angular 指令的问题
- angular的指令
- angular自定义指令(中)
- angular指令中scope三个符号的说明
- Angular指令中几个重要属性的具体用法
- angular中compile和link的区别
- 关于Angular 指令的理解
- Angular 比较常用的指令
- angular创建自定义的指令
- angular指令间的交互
- Angular 比较常用的指令
- iOS 地图坐标系转换
- 《将博客搬至jianshu》
- phpcms v9无法连接数据库服务器,请检查配置
- 栈的基本操作
- 从0到1利用React-Native构建百思不得姐(四)
- angular指令中@,=,&的区别
- OpenCV 直线拟合及应用
- eclipse中导入Maven工程,包引入路径报错
- 【Android】存储选项详解
- Tinker使用过程及注意点(1)-环境搭建及简单使用
- DeepLab:深度卷积网络,多孔卷积 和全连接条件随机场 的图像语义分割 Semantic Image Segmentation with Deep Convolutional Nets, Atro
- 在hbuilder中利用xdebug helper 断点调试php
- scikit-learn的基本用法(四)——数据归一化
- Java对象初始化顺序