AngularJS指令中的绑定策略实例分析  更新时间:2016年12月14日 11:01:17   作者:小小小小小亮   这篇文章主要介绍了AngularJS指令中的绑定策略,结合实例形式分析了scope绑定策略的分类与具体实现方法,需要的朋友可以参考下 本文实例讲述了AngularJS指令中的绑定策略。分享给大家供大家参考,具体如下: 在前面的文章中,我们知道了指令如何生成独立的scope,这一节中我们来仔细研究一下scope中的绑定策略。 总体来说scope的绑定策略分为3种: (1)@ : 绑定字符串 (2)=: 与父控制器进行双向绑定 (3)&:用于调用父scope中的函数 1.基础方式 app.controller(‘myController1’,[‘$scope’,function($scope){ $scope.wordCtrl=”hello”; }]); app.directive(‘test’,function(){ return{ restrict:’E’, template:”{{word}}”, link:function(scope,ele,attr){ scope.word=attr.word; } } }); 显示效果: 这是最基础的方法,实现了字符串在scope中的绑定 2.实际上,我们可以通过改写实现上述的方法 app.directive(‘test’,function(){ return{ restrict:’E’, scope:{ word:’@’ }, template:”{{word}}”, } }); 可以通过删除link函数,并且增加@绑定,这样就成功的实现指令中的属性与指令scope的字符串绑定。 3.‘=’绑定 如果使用=绑定,那么不仅可以改变指令中scope中值,同时也可以改变父控制器中的值,实现双向绑定。 例子: ctrl: app.directive(‘test’,function(){ return{ restrict:’E’, scope:{ word:’@’ }, template:”directive:”, } }); 效果就是,改变了指令中scope的值的同时也会改变控制器中相对应的变量的值,实现了控制器和指令中scope的双向绑定。 效果如下: 3.‘&’方法 app.directive(‘test’,function(){ return{ restrict:’E’, scope:{ greet:’&’ }, template:”点击说HELLO”, } }); 注意传递参数的方法。 更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: Angularjs中三种数据的绑定策略(“@”,“=”,“&”) 详解angularjs中的隔离作用域理解以及绑定策略 详解angularJs指令的3种绑定策略 angularjs指令之绑定策略(@、=、&) angularJS 中$scope方法使用指南 AngularJS中监视Scope变量以及外部调用Scope方法 深入解析AngularJS框架中$scope的作用与生命周期 AngularJs Scope详解及示例代码 浅谈AngularJs指令之scope属性详解 AngularJS中scope的绑定策略实例分析 AngularJS 指令 绑定 相关文章 Angular进行简单单元测试的实现方法实例 这篇文章主要给大家介绍了关于Angular进行简单单元测试的实现方法,文中仅用了几行代码,文中通过示例代码介绍的非常详细,对大家学习或者使用Angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2020-08-08 angular中不同的组件间传值与通信的方法 本篇文章主要介绍了angular中不同的组件间传值与通信的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-11-11 Ionic + Angular.js实现验证码倒计时功能的方法 验证码倒计时这个功能相信对大家每个人来说都不陌生,之前介绍了在Android中的实现方法,下面这篇文章主要给大家介绍了利用Ionic + Angular.js实现验证码倒计时功能的相关资料,文中介绍的非常详细,需要的朋友们下面来一起看看吧。 2017-06-06 Angular中sweetalert弹框的基本使用教程 这篇文章主要给大家介绍了关于Angular中sweetalert弹框的基本使用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2018-07-07 AngularJS入门教程一:路由用法初探 这篇文章主要介绍了AngularJS路由用法,简单分析了AngularJS路由的概念、功能及基本使用方法,需要的朋友可以参考下 2017-05-05 详解AngularJS 模块化 本篇文章主要介绍了详解AngularJS 模块化,模块用于单独的逻辑表示服务,控制器,应用程序等,并保持代码的整洁。有兴趣的可以了解一下 2017-06-06 angular4 获取wifi列表中文显示乱码问题的解决 这篇文章主要介绍了angular4 获取wifi列表中文显示乱码问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-10-10 Angular的$http的ajax的请求操作(推荐) 这篇文章主要介绍了Angular的$http的ajax的请求操作的相关资料,需要的朋友可以参考下 2017-01-01 AngularJS入门教程之静态模板详解 本文主要介绍AngularJS 静态模板,这里整理了相关的基础资料,会帮助大家学习基础的AngularJS的基础知识,有需要的小伙伴可以参考下 2016-08-08 对Angular中单向数据流的深入理解 这篇文章主要给大家介绍了关于对Angular中单向数据流的深入理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 2018-03-03 最新评论

本文实例讲述了AngularJS指令中的绑定策略。分享给大家供大家参考,具体如下:

在前面的文章中,我们知道了指令如何生成独立的scope,这一节中我们来仔细研究一下scope中的绑定策略。

总体来说scope的绑定策略分为3种:

(1)@ : 绑定字符串

(2)=: 与父控制器进行双向绑定

(3)&:用于调用父scope中的函数

1.基础方式

<test word="{{wordCtrl}}"></test>

app.controller('myController1',['$scope',function($scope){
    $scope.wordCtrl="hello";
}]);
app.directive('test',function(){
    return{
     restrict:'E',
     template:"<div>{{word}}</div>",
     link:function(scope,ele,attr){
      scope.word=attr.word;
     }
    }
});

显示效果:

这是最基础的方法,实现了字符串在scope中的绑定

2.实际上,我们可以通过改写实现上述的方法

app.directive('test',function(){
    return{
     restrict:'E',
     scope:{
      word:'@'
     },
     template:"<div>{{word}}</div>",
    }
});

可以通过删除link函数,并且增加@绑定,这样就成功的实现指令中的属性与指令scope的字符串绑定。

3.‘=’绑定

如果使用=绑定,那么不仅可以改变指令中scope中值,同时也可以改变父控制器中的值,实现双向绑定。

例子:

<div>
   <span>ctrl:</span>
   <input ng-model="wordCtrl"/>
</div>
<test word="{{wordCtrl}}"></test>

app.directive('test',function(){
    return{
     restrict:'E',
     scope:{
      word:'@'
     },
     template:"directive:<input ng-model='word' />",
    }
});

效果就是,改变了指令中scope的值的同时也会改变控制器中相对应的变量的值,实现了控制器和指令中scope的双向绑定。

效果如下:

3.‘&’方法

<test greet="sayHello()"></test>

app.directive('test',function(){
    return{
     restrict:'E',
     scope:{
      greet:'&'
     },
     template:"<div ng-click='sayHello({name:'yuxiaoliang'})'>点击说HELLO</div>",
    }
});

注意传递参数的方法。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

您可能感兴趣的文章:

  • Angularjs中三种数据的绑定策略(“@”,“=”,“&”)
  • 详解angularjs中的隔离作用域理解以及绑定策略
  • 详解angularJs指令的3种绑定策略
  • angularjs指令之绑定策略(@、=、&)
  • angularJS 中$scope方法使用指南
  • AngularJS中监视Scope变量以及外部调用Scope方法
  • 深入解析AngularJS框架中$scope的作用与生命周期
  • AngularJs Scope详解及示例代码
  • 浅谈AngularJs指令之scope属性详解
  • AngularJS中scope的绑定策略实例分析
张贴在3