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. SQL Server 2005 临时表

    with t as ( select * from t_pub_param ) select * from t SQL Server 2005 之后才可以使用,查询后临时表t会自动删除.

  2. MongoDB的Python客户端PyMongo（转）

    原文:https://serholiu.com/python-mongodb 这几天在学习Python Web开发,于是做准备做一个博客来练练手,当然,只是练手的,博客界有WordPress这样的好玩 ...

  3. Linux内核协议栈相关资料链接

    1.Linux内核网络分析(个人博客集合,分析较清晰) http://blog.csdn.net/qy532846454/article/category/1385933/2

  4. MySQL之表的约束

    一 介绍 约束条件与数据类型的宽度一样,都是可选参数 作用:用于保证数据的完整性和一致性主要分为: PRIMARY KEY (PK) 标识该字段为该表的主键,可以唯一的标识记录 FOREIGN KEY ...

  5. phalcon—— PHP基础知识(一)

    一.变量和常量 1.1.变量名(标示符) 1)变量:$开头标志 2)变量名:能够由字母.数字,_ 3者组成,不能用数字开头 3)标识符是区分大写和小写的.但函数名不区分大写和小写. 4)变量名称能够与 ...

  6. Python面向对象高级编程-@property

    使用@property 在绑定属性时,如果直接把属性暴露出去,虽然写起来简单,但是没法检查参数,导致可以把成绩随便改: >>> class Student(object): pass ...

  7. 006-虚拟机中centos7实现nat静态ip上网

    1.设置虚拟机网卡VMnet8 2.修改虚拟机参数 (1).点击编辑-->虚拟网络编辑器,如下图设置 (2)nat设置如下[使用默认即可,记住网关.掩码等,非常重要,因为在centos里面要设置 ...

  8. tensorflow 中 name_scope 及 variable_scope 的异同

    Let's begin by a short introduction to variable sharing. It is a mechanism in TensorFlow that allows ...

  9. Mysql查询结果导出为Excel的几种方法

    本文地址:http://www.cnblogs.com/qiaoyihang/p/6398673.html 具体原文找不到了,此篇是借鉴门户的一篇文章 方法一:查询语句直接输出语法格式: Exampl ...

  10. Behind The Cloud--浅析分布式系统背后的基础设施

     http://blog.csdn.net/it_yuan/article/details/8617127 Behind The Cloud--浅析分布式系统背后的基础设施 分类: 系统架构2013- ...