angular指令中@，=，&的区别

最新推荐文章于 2024-09-02 19:15:52 发布

Yoghurt Xu

最新推荐文章于 2024-09-02 19:15:52 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_40374953/article/details/88788613

前端专栏收录该内容

44 篇文章

订阅专栏

本文介绍了AngularJS中directive的三种绑定方式：@（单向数据绑定）、=（双向数据绑定）和&（函数绑定）。通过实例展示了如何在指令中使用这些绑定策略来实现与外部作用域之间的数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当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>