<!DOCTYPE html>

<html lang="zh-CN" ng-app="app">

<head>

    <meta charset="utf-8">

    <title>绑定策略</title>

    <link rel="stylesheet" href="../bootstrap.min.css">

</head>

<body>

    <h4>

        AngularJS提供了几种方法能够将指令内部的隔离作用域，同指令外部的作用域进行数据绑定。

    </h4>

    为了让新的指令作用域可以访问当前本地作用域中的变量，需要使用下面三种别名中的一种（以下为官方的解释）：

    <ol>

        <!--本地作用域属性：使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域的变量。-->

        <li>@ (or @attr)</li>

        <!--双向绑定：通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。 就像普通的数据绑定一样，本地属性会反映出父数据模型中所发生的改变。 -->

        <li>= (or =attr)</li>

        <!--父级作用域绑定 通过&符号可以对父级作用域进行绑定，以便在其中运行函数。意味着对这个值进行设置时会生成一个指向父级作用域的包装函数。

        要使调用带有一个参数的父方法，我们需要传递一个对象，这个对象的键是参数的名称，值 是要传递给参数的内容。-->

        <li>& (or &attr)</li>

    </ol>

    <div style="border: 1px solid red;width: 400px;height: 200px;" ng-controller="ParentController">

        <p style="color: orange;">请认真记住以下输入框中的提示文字</p>

        记住了？<input type="checkbox" ng-model="isRemember">

        <p ng-show="isRemember">

            <input type="text" ng-model="someVal" placeholder="随意输入几个值">

            并试着改变下面两个input的值

        </p>

        <div ng-show="!isRemember || someVal" my-directive one-val="{{someVal}}" two-val="someVal" three-val="parentFun('哈哈')"></div>

    </div>

    <script src="../angular.min.js"></script>

    <script>

        angular.module('app', [])

        .directive('myDirective', function() {

            return {

                restrict: 'A',

                replace: true,

                scope: {

                    oneVal: '@oneVal', // 相当于“值复制”

                    twoVal: '=twoVal', // 相当于“引用复制”

                    threeVal: '&threeVal' // 绑定父作用域中的方法

                },

                template: '<div>'+

                            '<input type="text" ng-model="oneVal" placeholder="@ 改变我其他不受影响">'+

                            '<input type="text" ng-model="twoVal" placeholder="= 要是动我其他都得变">'+

                            '<input type="button" ng-click="threeVal()" value="$ 点我试试">'+

                          '</div>'

            }

        })

        .controller('ParentController', function($scope) {

            $scope.parentFun = function(s) {

                alert("我成功绑定了父级作用域中的函数！" + s);

            }

        })

    </script>

</body>

</html>

以上实例可以直接运行，动手跑跑更有意思哦！

angularjs中的绑定策略“@”，“=”，“&”实例的更多相关文章

  1. 解析angularjs中的绑定策略

    一.首先回顾一下有哪些绑定策略? 看这个实在是有点抽象了,我们来看具体的实例分析吧! 二.简单的Demo实例 @绑定:传递一个字符串作为属性的值.比如 str : ‘@string’ 控制器中代码部分 ...

  2. AngularJs 中ngModel绑定HTML5 date数据同步问题

    以下代码例子中,直接将date类型的input标签与ng-model对应的变量绑定,会出现内存数据和页面数据不一致的问题.虽然AngularJS是双向数据绑定,但是如果用下面的方法,在页面更新date ...

  3. angularjs 指令—— 绑定策略（@、=、&）

    angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到 ...

  4. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  5. AngularJS学习笔记之directive—scope选项与绑定策略

    From:http://www.linuxidc.com/Linux/2015-05/116924.htm scope:{}使指令与外界隔离开来,使其模板(template)处于non-inherit ...

  6. Angularjs 中使用指令绑定点击事件

    项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> ...

  7. AngularJS学习笔记之directive——scope选项与绑定策略

    开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细 ...

  8. angularjs中的单选框绑定数据注意事项

    这里说的是angularjs 1.x 在实现单选框时,我们完全可以用html自带的<input type="radio"/>,但是配合angularjs 中的双向绑定, ...

  9. 深入学习AngularJS中数据的双向绑定机制

    来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...

随机推荐

  1. bzoj2071: [POI2004]JAS

    Description 在Byteotia有一个洞穴. 它包含n 个洞室和一些隧道连接他们. 每个洞室之间只有一条唯一的路径连接他们. Hansel 在其中一个洞室藏了宝藏, 但是它不会说出它在哪. ...

  2. JVM笔记-temp

    jvm源码分析之堆外内存完全解读 http://lovestblog.cn/blog/2015/05/12/direct-buffer/

  3. TCP状态转换图

    注意: connect函数导致当前套接字从CLOSE状态(该套接字自从由socket函数创建以来一直所处的状态)转移到SYN_SENT状态 若成功则再转移到ESTABLISHED状态, 若connec ...

  4. Stack集合 Queue队列集合 Hashtable哈希表

    Stack集合 干草堆集合 栈集合 栈;stack,先进后出,一个一个赋值,一个一个取值,安装顺序来. 属性和方法 实例化 初始化 Stack st = new Stack(); 添加元素 个数 Co ...

  5. JDBC与javaBean

    1.JDBC的概念: Java数据库连接技术(Java DataBase Connectivity)能实现java程序对各种数据库的访问, 由一组使用java语言编写的类 和 接口(jdbc api) ...

  6. NOI 2005 维修数列

    妈妈呀我终于过了!!!原来是数据坑我!!! 弃疗弃疗弃疗弃疗!!!!我调了一天呢....被GET_SUM 8 0打败了.... 啥也不说了....还是我太年轻.... 更新了一下常数,跑的还是可以的: ...

  7. （2015年郑州轻工业学院ACM校赛题） C 数列

    在我们做完B题之后就去看C题了, 发现很多人都已经做出来了, 并且一血还是我们学弟拿的, 感觉这题不难, 我们举了几个例子之后发现全是Alice 然后我们就决定意淫一下,试试看! 没想到就A了 - . ...

  8. Silverlight分享一套企业开发主题

    Silverlight分享一套企业开发主题 Silverlight默认主题时间长了,也视觉疲劳了,于是上网上找了下Silverlight主题.发现SL的主题并不多,下面这套JetPack主题还是SL4 ...

  9. Delphi HTTPRIO控件怎么设置超时参数

    HTTPRIO控件怎么设置超时参数 //HTTPRIO1: THTTPRIO  设置5分钟超时 HTTPRIO1.HTTPWebNode.ConnectTimeout := 5000; Connect ...

  10. CPU使用率计算

    昨天接到临时任务,需要将一个工作线程执行真正工作的时机推迟到CPU空闲时执行.当时第一感觉认为是将线程优先级设置为空闲级别就行了,以为只有CPU空闲下来才会去跑这个线程,实际上应该不是,毕竟即时是空闲 ...