angularJS中directive父子组件的数据交互

1. 使用共享 scope 的时候，可以直接从父 scope 中共享属性。使用隔离 scope 的时候，无法从父 scope 中共享属性。在 Directive 中创建隔离 scope 很简单，只需要定义一个 scope 属性即可，这样，这个 directive 的 scope 将会创建一个新的 scope，如果多个 directive 定义在同一个元素上，只会创建一个新的 scope。

2. directive 在使用隔离 scope 的时候，提供了三种方法同隔离之外的地方交互。这三种分别是

（1） @：单向绑定，仅当父作用域的中的变量改变时，子作用域中绑定的变量才变化，反之不成立。

html

<body ng-app="app"  ng-controller="ctl1" style="text-align: center; line-height: 2em;font-size: 14px">

    <div>

        <div>父scope：

            <div>

                Say：{{name}}<br>

                改变父scope的name：<input type="text" value="" ng-model="name"/>

            </div>

        </div>

        </br></br></br></br>

        <div>隔离scope：显示为hello world,随着父作用域中的name的改变而改变，</br>

            由于是单向的，所以这里的name改变不会对父作用域造成任何影响。

            <div test-directive name="{{name}}"></div>

        </div>

        </br></br></br></br>

        <div>隔离scope：不使用双花括号name就直接显示为name了,不会随着父作用域中的name的改变而改变。

            <div test-directive name="name"></div>

        </div>

    </div>

</body>

js

    angular.module('app', []).controller("ctl1", function ($scope) {

        $scope.name = "hello world";

    }).directive("testDirective", function () {

        return {

            scope: {

                name: "@"

            },

            template: 'Say：{{name}} <br>改变隔离scope的name：<input type="buttom" value="" ng-model="name" class="ng-pristine ng-valid">'

        }

    })

效果：改变第一个input，则第二部分的name会跟着改变，改变第二个input，第一个不会跟着改变，即绑定是单向的，改变第三个input，第一个和第二个没有任何影响，因为没有绑定。

（2）. =：双向绑定，仅当父作用域的中的变量改变时，子作用域中绑定的变量才变化，反之成立。（注意在子组件和父组件中进行数据绑定的写法）

html

<body ng-app="app"  ng-controller="ctl1" style="text-align: center; line-height: 2em;font-size: 14px">

<div>

    <div>父scope：

        <div>

            Say：{{parentName}}<br>

            改变父scope的name：<input type="text" value="" ng-model="parentName"/>

        </div>

    </div>

    </br></br></br></br>

    <div>隔离scope：显示为hello world,随着父作用域中的name的改变而改变，</br>

        由于是双向的，所以这里的子作用域中name改变也会使父作用域做出相同的变化。

        <div test-directive name="parentName"></div>

    </div

    </br></br></br></br>

    <div>这个会报错

        <div test-directive name="{{parentName}}"></div>

    </div>

</div>

</body>

js

<script>

    angular.module('app', []).controller("ctl1", function ($scope) {

        $scope.name = "hello world";

    }).directive("testDirective", function () {

        return {

            scope: {

                childName: "=name"

            },

            template: 'Say：childName <br>改变隔离scope的name：<input type="buttom" value="" ng-model="childName" class="ng-pristine ng-valid">'

        }

    })

</script>

效果

（3）. &：可以使用在父scope中定义的函数。

html

<body ng-app="app"  ng-controller="ctl1" style="text-align: center; line-height: 2em;font-size: 14px">

<div>父scope：

    <div>Say：{{value}}</div>

</div>

<div>隔离scope：

    <div test-directive buttonClick="click()"></div>

</div>

</body>

js

angular.module('app', []).controller("ctl1", function ($scope) {

        $scope.value = "hello world";

        $scope.click = function () {

            $scope.value = Math.random();

        };

    }).directive("testDirective", function () {

        return {

            scope: {

                action: "&buttonClick"

            },

            template: '<input type="button" value="在directive中执行父scope定义的方法" ng-click="action()"/>'

        }

    })

效果：

3. 参考：https://blog.coding.net/blog/angularjs-directive-isolate-scope

angularJS中directive父子组件的数据交互的更多相关文章

  1. vue2中component父子组件传递数据props的使用

    子组件使用父亲传过来的数据,我们需要通过子组件的 props 选项. 组件实例的作用域是孤立的,不能在子组件的模板内直接引用父组件的数据.修改父亲传过来的props数据的时候 父亲必须传递对象,否则不 ...

  2. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  3. Vue中独立组件之间数据交互

    独立组件之间数据交互:通过自定义事件 组件A中的[数据],传递给组件B 1.创建组件A,组件B 2.组件B在实例创建完成时就开始监听事件[等待接收数据]:钩子 3.组件A中触发事件,发送数据 注意:接 ...

  4. 04 . Vue组件注册,数据交互,调试工具及组件插槽介绍及使用

    vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...

  5. 04 . Vue组件注册,组件间数据交互,调试工具及组件插槽介绍及使用

    vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...

  6. Vue2.x中的父子组件相互通信

    业务场景:(这里指的是直接父子级关系的通信) 美女(子组件)将消息发送给大群(父组件) 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件) 父组件 template <template ...

  7. Vue基础-渲染函数-父子组件-传递数据

    Vue 测试版本:Vue.js v2.5.13 做了个 demo,把父子组件的数据都绑定到 Vue 实例 app 上,注释中的 template 相对好理解些 <div id="app ...

  8. 后端接收不到AngularJs中$http.post发送的数据的问题

    1.问题: 后端接收不到AngularJs中$http.post发送的数据,总是显示为null 示例代码: $http.post(/admin/KeyValue/GetListByPage, { pa ...

  9. AngularJS中使用$http对MongoLab数据表进行增删改查

    本篇体验使用AngularJS中的$http对MongoLab数据表进行增删改查. 主页面: <button ng-click="loadCourse()">Load ...

随机推荐

  1. PostgreSQL: WITH Queries (Common Table Expressions)

    WITH 允许在 SELECT 语句中定义"表"的表达式,这个"表"的表达式称之为"公共表表达式(Common Table Expression)&q ...

  2. python多线程锁lock/Rlock/BoundedSemaphore/Condition/Event

    import time import threading lock = threading.RLock() n = 10 def task(arg): # 加锁,此区域的代码同一时刻只能有一个线程执行 ...

  3. java输出pdf

    package snake; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; ...

  4. node.js---sails项目开发（3）

    1.为新建的sails数据库新建一个用户,首先连接数据库 mongo localhost:27017 (1)显示所有数据库   (2)切换数据库 show dbs use sails 新建一个用户 账 ...

  5. CentOS 6.5 QtCreator启动时 dbus-1的错误解决方法

    启动QtCreator提示:dbus_connection_can_send_type的错误, QString::arg: Argument missing: 无法解析dbus_connection_ ...

  6. boost noncopyable类

    1. 当声明一个类时,编译器会自动为该类生成默认构造函数,复制构造函数,赋值操作符以及析构函数: 2.自动生成的各个函数和操作符都是public的: 3.当声明一个类不允许复制时,可以将一个类的复制构 ...

  7. Rest Framework源码流程解析

    目录: 一 整体流程 二 具体流程 一 请求进来之后,都要先执行dispatch方法,dispatch方法根据请求方式的不同触发get/post/put/delete等方法 注意,APIView中的d ...

  8. MyBatis For .NET学习- 初识MyBatis

    MyBatis的框架. Introduction MyBatis本是apache的一个开源项目iBatis,2010年这个项目由 apache software foundation迁移到了googl ...

  9. Spring 配置log4j和简单介绍Log4J的使用

    Log4j 是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件.甚至是套接口服务器.NT的事 件记录器.UNIX Syslog守护进程等 ...

  10. linux 文本分析工具---awk命令(7/1)

    awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...