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. 我的Android进阶之旅------>Android Listview跳到指定条目位置的两种实现方法

    前言 今天实现ListView跳转到第一个条目位置时,使用smoothScrollToPosition(int position)方法跳转实现了,但是交互说不需要这样的动画效果,需要直接跳转到第一项, ...

  2. Linux一键安装web环境全攻略（阿里云ECS服务器）

    摘自阿里云服务器官网,此处 一键安装包下载: 点此下载 安装须知 1.此安装包可在阿里云所有linux系统上部署安装,此安装包包含的软件及版本为: nginx:1.0.15.1.2.5.1.4.4 a ...

  3. matlab循环保存dat文件

    将数据保存为dat文件 这里有两种方法,第一种是: save filename dataname; 这种方法书写简单,但是功能也很简单.这里的filename就是死的filenam,即filename ...

  4. Rest Framework源码流程解析

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

  5. Linux Shell编程第2章——Linux文件系统

    目录 用户和用户组管理 用户管理常用命令 用户组管理常用命令 文件和目录操作 文件操作常用命令 目录操作常用命令 文件和目录权限管理 文件查找--find 用户和用户组管理 用户管理常用命令 用户的角 ...

  6. NHibernate之配置文件属性说明

    一.NHibernate配置所支持的属性 属性名 用途 dialect 设置NHibernate的Dialect类名 - 允许NHibernate针对特定的关系数据库生成优化的SQL 可用值: ful ...

  7. PAT 天梯赛 L1-010. 比较大小 【水】

    题目链接 https://www.patest.cn/contests/gplt/L1-010 AC代码 #include <iostream> #include <cstdio&g ...

  8. datagrid 用法

    http://blog.csdn.net/xhhuang1979/article/details/8331682

  9. OpenCL 学习step by step (5) 使用二维NDRange workgroup

    http://www.cnblogs.com/mikewolf2002/archive/2012/09/07/2675634.html 在本教程中,我们使用二维NDRange来设置workgroup, ...

  10. HDU2385Stock

    /*既然前一天的可以省下来给过后一天卖,那么就倒着卖,那么最后一天的只能在最后一天卖,如果可以卖完,还有可卖的名额,那么就从 倒数第二天取,如果卖不完只能丢掉,而且必定是尽量留到价格最高的那一天卖*/ ...