AngularJS指令之directive参数scope绑定策略'='和'&'报错问题,@正常

前言:熟悉angular的同学都知道,ng的指令非常强大,其中directive中的scope绑定策略用途很广泛,今天具体总结下scope绑定策略的知识点以及坑(可能对我自己而言是坑,此文记录。)

1.@

把当前的属性作为字符串传递。还可以绑定来自外层的scope的值,在属性值中插入{{ }}即可。什么意思呢?说的简单一点就是假设你在模板中有个双花括号表达式,然后我们把表达式里的内容和html中指令里特定名字的属性绑定起来:

//查看
app.directive('viewer',function(viewFactory){
	return {
		restrict: 'EACM',
		replace: true,
		scope: {
			userData: '@'
		},
		template: '<a href="javascript:;" ng-click="viewLine()">查看</a>',
		controller: ['$scope',function($scope){
			//;
		}],
		link: function(scope,element,attr,controller){
			scope.viewLine = function(){
				scope.userData = angular.fromJson(scope.userData)
				viewFactory.viewer(scope)
			}
		}
	}
})

2.=

与父scope中的属性进行双向绑定
注意(重要的问题说三遍):

@是针对字符串(双大括号中expression)而用,但=是针对某个对象的引用;
@是针对字符串(双大括号中expression)而用,但=是针对某个对象的引用;
@是针对字符串(双大括号中expression)而用,但=是针对某个对象的引用;

//编辑
app.directive('edit',function(editFactory){
	return {
		restrict: 'E',
		replace: true,
		scope: {
			userData: '='
		},
		template: '<a href="javascript:;" ng-click="editLine()">编辑</a>',
		controller: ['$scope',function($scope){
			//;
		}],
		link: function(scope,element,attr,controller){
			scope.editLine= function(){
				console.log(scope.userData)
				scope.userData = angular.fromJson(scope.userData)
				editFactory.edit(scope)
			}
		}
	}
})

users是一个对象数组,可以包含很多数组,我们分别把对应的对象通过$index索引传递给了user-date这个属性,user-date属性就把这个对象的引用传递到链接函数中并引用userData;

3.&

传递来自父scope中的函数、稍后调用

它的含义是:对父级作用域进行绑定,并将其中的属性包装成一个函数,注意任何类型的属性都会被包装成一个函数,比如一个单纯的字符串,或是一个对象数组,或是一个函数方法。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值