AngularJS指令之scope绑定策略

半兽人 发表于: 2018-10-02   最后更新时间: 2018-10-02 18:27:59  
{{totalSubscript}} 订阅, 3,308 游览
标识 描述
@ 把当前属性作为字符串传递,你还可以绑定来自外层的socpe值,在属性值中插入{{}}即可。
= 与父scope中的属性双向绑定
& 传递一个来自父scope的函数,稍后调用

@绑定

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
    </head>
    <body>
        <div ng-controller="MyCtrl">
            <drink flavor="{{ctrlFlavor}}"></drink>
        </div>
    </body>
    <script src="framework/angular-1.3.0.14/angular.js"></script>
</html>

<script>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
    $scope.ctrlFlavor="百威";
}])
myModule.directive("drink", function() {
    return {
        restrict:'AE',
        template:"<div>{{flavor}}</div>",
        link:function(scope,element,attrs){
           scope.flavor=attrs.flavor;
        }
    }
});
</scribe>

结果:

百威

我们来梳理一下步骤:

  1. html引用了一个指令drink,指令中通过flavor属性绑定了控制器的ctrlFlavor,所以,指令属性已经拿到了控制器中ctrlFlavor的值:百威
  2. js中的drink指令,template模板中,是获取{{flavor}}
  3. link中的attrs绑定了html页面中的flavor属性,拿到了第一步获取到的“百威”,然后在通过scope,将值赋给模板中的flavor,则页面显示百威

而使用@,可以简化上面的步骤:

var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
    $scope.ctrlFlavor="百威";
}])
myModule.directive("drink", function() {
    return {
        restrict:'AE',
        scope:{
            flavor:'@'
        },
        template:"<div>{{flavor}}</div>"
        // ,
        // link:function(scope,element,attrs){
        //     scope.flavor=attrs.flavor;
        // }
    }
});

这样,Angularjs就会自动帮我们进行绑定了。

注意:@绑定,传递的是字符串

=绑定

双向绑定,我们希望把指令里的指令,和控制器中的进行双向绑定,只需要设置成=号即可,我们来看个例子。

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
    </head>
    <body>
        <div ng-controller="MyCtrl">
            Ctrl:
            <br>
            <input type="text" ng-model="ctrlFlavor">
            <br>
            Directive:
            <br>
            <drink flavor="ctrlFlavor"></drink>
        </div>
    </body>
    <script src="framework/angular-1.3.0.14/angular.js"></script>
</html>

<script>
    var myModule = angular.module("MyModule", []);
    myModule.controller('MyCtrl', ['$scope', function($scope){
        $scope.ctrlFlavor="百威";
    }])
    myModule.directive("drink", function() {
        return {
            restrict:'AE',
            scope:{
                flavor:'='
            },
            template:'<input type="text" ng-model="flavor"/>'
        }
    });
</script>

这样,2个input输入的内容,都会发生变化,比较简单,就不细说了。

& 函数绑定

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
    </head>
    <body>
        <div ng-controller="MyCtrl">
            <greeting greet="sayHello(name)"></greeting>
            <greeting greet="sayHello(name)"></greeting>
            <greeting greet="sayHello(name)"></greeting>
        </div>
    </body>
    <script src="framework/angular-1.3.0.14/angular.js"></script>
</html>

<script>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
    $scope.sayHello=function(name){
        alert("Hello "+name);
    }
}])
myModule.directive("greeting", function() {
    return {
        restrict:'AE',
        scope:{
            greet:'&'
        },
        template:'<input type="text" ng-model="userName" /><br/>'+
                 '<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>'
    }
});
</script>

步骤解释:

  1. 首先html,有3个相同的指令greeting,有个属性greet,绑定了控制器sayHello这个方法。
  2. 指令中,模块有一个input和一个button,button中的greet绑定成了sayHello
  3. sayHello中有个参数name,通过name:userName与input进行绑定

这种就属于函数传递了。

总结

  • @: 已字符串的形式进行传递的。
  • =: 双向绑定的
  • &: 用来传递函数的,调用父层的
更新于 2018-10-02

查看AngularJS更多相关的文章或提一个关于AngularJS的问题,也可以与我们一起分享文章