脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJS指令中的绑定策略

AngularJS指令中的绑定策略实例分析

 更新时间：2016年12月14日 11:01:17   作者：小小小小小亮  
这篇文章主要介绍了AngularJS指令中的绑定策略,结合实例形式分析了scope绑定策略的分类与具体实现方法,需要的朋友可以参考下

本文实例讲述了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表单验证中级篇（3）

    AngularJS表单验证中级篇（3）

    这篇文章主要为大家详细介绍了AngularJS表单验证,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • AngularJS基础 ng-click 指令示例代码

    AngularJS基础 ng-click 指令示例代码

    本文介绍AngularJS ng-click 指令,这里整理了ng-click指令的基础知识并且附有简单示例代码和实现效果图,有需要的小伙伴参考下
    2016-08-08
  • Angular封装搜索框组件操作示例

    Angular封装搜索框组件操作示例

    这篇文章主要介绍了Angular封装搜索框组件操作,结合实例形式分析了基于Angular组件库实现搜索功能的封装操作相关实现步骤与注意事项,需要的朋友可以参考下
    2019-04-04
  • Angular实现的内置过滤器orderBy排序与模糊查询功能示例

    Angular实现的内置过滤器orderBy排序与模糊查询功能示例

    这篇文章主要介绍了Angular实现的内置过滤器orderBy排序与模糊查询功能,涉及AngularJS过滤器、排序及字符串遍历、查询等相关操作技巧,需要的朋友可以参考下
    2017-12-12
  • 详解Angular16如何获取路由参数

    详解Angular16如何获取路由参数

    这篇文章主要为大家介绍了Angular16如何获得路由参数的实现方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • AngularJS初始化静态模板详解

    AngularJS初始化静态模板详解

    这篇文章主要为大家介绍了AngularJS初始化静态模板，AngularJS初始化静态模板有两种方式，一是通过ng-app来自动初始化模块，也可以通过angular.bootstrap(document, [module])手动启动应用，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • angularjs的单选框+ng-repeat的实现方法

    angularjs的单选框+ng-repeat的实现方法

    今天小编就为大家分享一篇angularjs的单选框+ng-repeat的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Angular中的NgZone.run()有什么用途

    Angular中的NgZone.run()有什么用途

    在Angular中,NgZone是一个服务,用于管理异步任务的执行,并提供一种在Angular区域内或外部显式运行代码的方式,NgZone.run方法是一种显式在Angular区域内运行函数的方式,本文介绍Angular中的NgZone.run()有什么用,感兴趣的朋友一起看看吧
    2024-01-01
  • AngularJS表单编辑提交功能实例

    AngularJS表单编辑提交功能实例

    这篇文章主要介绍了AngularJS表单编辑提交功能实例,本文讲解如何修改表单的默认值,需要的朋友可以参考下
    2015-02-02
  • AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例

    AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例

    这篇文章主要介绍了AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能,结合实例形式分析了AngularJS自定义过滤器的定义及数组过滤相关操作技巧,需要的朋友可以参考下
    2018-04-04

最新评论