《AngularJS》——scope的三种绑定策略

最新推荐文章于 2018-10-06 11:21:36 发布

composurext

最新推荐文章于 2018-10-06 11:21:36 发布

阅读量1.3k

点赞数

分类专栏： JavaScript 文章标签： angularjs scope绑定策略 scope 三种绑定策略独立scope

本文链接：https://blog.csdn.net/composurext/article/details/72843051

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

三种绑定符的含义:

scope:{}使当前指令作用域与外界隔离开来，使其模板(template)处于non-inheriting(无继承)的状态

@的含义:把当前作用域属性当字符串传递，绑定外层scope的值，在自定义指令中的属性值中插入{{}}即可;
=的含义:与父scope进行双向绑定;
&的含义:传递一个来自父scope的函数(即对父级作用域进行绑定，并将其中的属性(可以是任何属性)包装成一个函数)，稍后调用;

前两种绑定的HTML

<dl>
    <dt>独立scope的绑定策略</dt>
    <dd>scope的@绑定策略</dd>
    <dd>scope的=绑定策略</dd>
    <dd>scope的&绑定策略</dd>
    <dd>使替换自定义指令的oinput得到文本中input的值</dd>
</dl>

<input type="text" ng-model="name">
<!--@的写法是表达式的形式-->
<!--<demo atr="{{name}}"></demo>-->
<!--=的写法是对象的形式-->
<demo atr="name"></demo>

第一种@的绑定策略

 var demo=angular.module('app',[]);
    demo.controller('ctrl',function ($scope) {
        $scope.name='我是文本中input的值';
    });
    demo.directive('demo',function () {
        return{
            //现在我想把name1的值和name的值相等
            scope:{
                //@的作用就是把外层atr的值(dom属性)赋值给name1传递,('我是文本中input的值')
               name1:'@atr'
            },
            restrict:'AE',
            template:'<input type="text" ng-model="name1"/>'
        }
    });

第二种=的绑定策略

 var demo=angular.module('app',[]);
    demo.controller('ctrl',function ($scope) {
        $scope.name='我是文本中input的值';
    });
    demo.directive('demo',function () {
        return{
            //现在我想把name1的值和name的值相等
            scope:{
                //=的作用就是把外层atr的值(其实就是name的值)与name1进项双向绑定
                name1:'=atr'
            },
            restrict:'AE',
            template:'<input type="text" ng-model="name1"/>'
        }
    });

第三种&的绑定策略

<!doctype html>
<html ng-app="MyModule">
<head>
    <meta charset="utf-8">
    <script src="../../../angular.1.4.8.min.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
    <!--自定义指令的sayName方法-->
   <hello method="sayName(name)"></hello>
</div>
<script>
    var myModule = angular.module('MyModule', []);
    myModule.controller('MyCtrl', function ($scope) {
        $scope.sayName = function (name) {
            alert("弹出输入的内容"+name);
        };
    });
    myModule.directive('hello', function () {
        return {
            restrict: 'AE',
            scope: {
                method:'&'//得到了父scope的sayName()方法
            },
//  写template是注意要有一个外部容器进行包括,把input上的数据绑定到method方法上
            template: '<div><input type="text" ng-model="userName"/>'+"<button ng-click='method({name:userName})'>say name</button></div>",
            replace:true
        };
    });
</script>
</body>
</html>

composurext

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《AngularJS》——scope的三种绑定策略

三种绑定符的含义:scope:{}使当前指令作用域与外界隔离开来，使其模板(template)处于non-inheriting(无继承)的状态@的含义:把当前作用域属性当字符串传递，绑定外层scope的值，在自定义指令中的属性值中插入{{}}即可;=的含义:与父scope进行双向绑定;&的含义:传递一个来自父scope的函数(即对父级作用域进行绑定，并将其中的属性(可以是任何属
复制链接

扫一扫

专栏目录