angularjs指令之绑定策略(@、=、&)

前端之家收集整理的这篇文章主要介绍了angularjs指令之绑定策略(@、=、&)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新。那么需要用到那些变量,因用法的不同,所以需要设置合适的绑定策略。

1:先说指令域scope的@

我觉得描述很费劲,直接用代码来阐述:

AngularJS.html

<div ng-controller="listCtrl">

//这个必须指定的,这里的title是指令里scope的@对应的,t就是控制域scope下的 我的angularjs

main05.js

myApp.directive('kid',function(){
return {
'restrict':'E',scope:{
title:"@"
},template:'
{{title}}
'

}
});

在输入框输入数字会绑定到指令模板的title中。

2:再说说Scope的=

angularjs.html

<div ng-controller="listCtrl">

//和上面相比,这个直接赋值等于scope域下的t了

{{title}}

我的angularjs

main05.js代码如下:

方法调用

angularjs.HTML代码如下:

<div ng-controller="listCtrl">

//先比=,函数赋值的形式,而logchore函数必须是域scope下声明的函数

main05.js代码如下:

myApp.directive('kid',scope:{
flavor:"&"
},template:'
<button ng-click="flavor()">
'

}
});

如果logchore带有参数,

angularjs.HTML代码如下:

<div ng-controller="listCtrl">

main05.js代码如下:

myApp.directive('kid',template:'
<button ng-click="flavor({t:v})">
'

}
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章