您的位置：首页 > Web前端 > AngularJS

angularjs 指令—— 绑定策略（@、=、&）

2016-06-18 23:07 447 查看

angularjs 指令—— 绑定策略（@、=、&）

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

一、绑定策略

以@ 绑定策略来讲：

@ 绑定策略，它的作用就是能把指令配置的独立Scope下变量的值等于根据@绑定的指令属性的值。（指令属性的值可以使用表达式，但是得出来的值一定是字符串。）

1、上代码：

html代码 :

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>myDirective</title>
</head>
<body>
<input type="text" ng-model="myUrl">
<div my-directive my-url="{{myUrl}}" my-link-text="click me"></div> ①

</body>
<script src="../../common/angular-1.0.1.min.js"></script>
<script src="./demo1.js"></script>
</html>

js代码 :

angular.module('myApp', [])
.directive('myDirective', function () {
return {
restrict: 'A',//属性方式
replace: true,
scope: {
myUrl:'@',//@绑定策略(默认绑定到 my-url指令属性)
myLinkText:'@'//@绑定策略(默认绑定到 my-link-text 指令属性)
},
template: '<a href="{{myUrl}}">{{ myLinkText }}</a>'
}
});

2、解释：

在上面的代码中，我创建了一个指令

myDirective

该指令创建了两个变量 myUrl、myLinkText,并且这俩个变量都是采用

@绑定策略

。

说一下，不管是

、

还是

绑定策略，它们都有一个默认的方式，以@绑定策略为例，如上面代码那么样:

myUrl:'@'

，直接用一个

表示绑定的方式，它就会默认得将指令属性my-url的值赋值给myUrl变量。当然，你不想使用默认的方式，也就是说，你不想myUrl变量绑定my-url的值，而想要绑定其它属性名的值，那么你可以在

后加上你希望的属性名（格式要求：驼峰式）。如，我想讲myUrl绑定到

<myDirective></myDirective>

指令的some-attr属性的值，那么你可以这样写：

myUrl:'@someAttr'

。

那么我们知道了指令的myUrl变量的值是如何来的，那么我们要如何在template中使用它呢？这个很简单，看上面的代码就能很明白了，我们在template中的代码中需要用表达式的方式对其引用

{{myUrl}}

，这样我们就能够使用到myUrl变量的值了~

3、小结：

@ 绑定策略只能绑定（或者理解成传递）字符串值。要想传递方法(&)或者实现双向数据绑定(=)等操作，就得需要使用其它俩样的绑定方式咯

教程对@、=、&的讲解：

　　为了让新的指令作用域可以访问当前本地作用域中的变量，需要使用下面三种别名中的一种。

　　1. 本地作用域属性：使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域的变量：

　　

@ (or @attr)

　　现在，可以在指令中使用绑定的字符串了。

　　2. 双向绑定：通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。就像普通的数据绑定一样，本地属性会反映出父数据模型中所发生的改变。

　　

= (or =attr)

　　3. 父级作用域绑定通过&符号可以对父级作用域进行绑定，以便在其中运行函数。意味着对这个值进行设置时会生成一个指向父级作用域的包装函数。

　　要使调用带有一个参数的父方法，我们需要传递一个对象，这个对象的键是参数的名称，值是要传递给参数的内容。

　　

& (or &attr)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

angularjs 指令—— 绑定策略（@、=、&）