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. ZOJ 2770 Burn the Linked Camp 差分约束

    链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do? problemCode=2770 Burn the Linked Camp Time Limi ...

  2. struts 文件下载 annotation 注解版

    [本文简介] 本文将简单介绍使用 struts2 ,通过零配置和 annotation 实现文件下载功能. [文件夹结构] [web.xml有关struts的配置] <filter> &l ...

  3. MySQL读写分离之amoeba

    MySQL读写分离之amoeba主从复制的搭建环境参考:http://www.cnblogs.com/fansik/p/5270334.htmlamoeba依赖于jdk环境:jdk环境搭建参考:htt ...

  4. ASP.NET4 与 VS2010 Web 开发页面服务改进

    转:http://blog.163.com/kele_lipeng/blog/static/81345278201132754729336/ 作者:朱先忠 本文将接着上一篇 ASP.NET4与VS20 ...

  5. vue-cli脚手架build目录中check-versions.js的配置

    转载自:https://www.cnblogs.com/ye-hcj/p/7074363.html 本文介绍vue-cli脚手架build目录中check-versions.js的配置 本文件是用来检 ...

  6. Java消息队列ActiveMQ (一)--JMS基本概念

    摘要:The Java Message Service (JMS) API is a messaging standard that allows application components bas ...

  7. hadoop15---activemq

    java JMS技术 JMS是规范,activeMQ是实现. 用于在两个应用程序之间,或分布式系统中发送消息,进行异步通信. 它类似于JDBC,JDBC 是可以用来访问许多不同关系数据库的 API. ...

  8. LigerUI LigerGird IE7/8 下不显示 “in”的操作数无效

    LigerUI IE7/8 下显示 in的操作数无效 修改脚本生成LigerGrid的地方,将最后一列后面的,去掉

  9. wpf利用线程制作初始界面和关闭窗体特效

    1.首先定义初始窗体,和主窗体. 初始窗体(StartWindow) 主窗体(MainWindow): 2.在主窗体界面中,加载初始窗体.注意在线程中操作UI元素需要使用BeginInvoke或者In ...

  10. 20165101刘天野 2018-2019-2《网络对抗技术》Exp2 后门原理与实践

    目录 20165101刘天野 2018-2019-2<网络对抗技术>Exp2 后门原理与实践 1. 实验内容 1.1 使用netcat获取主机操作Shell,cron启动 1.2 使用so ...