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进阶之旅】解决bug:You need to use a Theme.AppCompat theme (or descendant) with this activity.

    前言 今天用Android Studio 生成Activity的时候,默认继承AppCompatActivity ,而在AndroidManifest.xml我对该Activity设置了一个主题,然后 ...

  2. Flask（5）- Flask-Session组件、WTForms组件、数据库连接池（POOL）

    一.Flask-Session 我们使用过flask内置的session,知道它是把session存放在浏览器,即客户端.今天要学习的flask-session是flask的第三方组件,看一下它和fl ...

  3. DBA学习参考绝佳资料

    原文来自:pursuer.chen 原文地址:https://www.cnblogs.com/chenmh/default.aspx?page=1 [置顶]MongoDB 文章目录 2018-02-0 ...

  4. macos没有任何来源怎么解决？

    打开终端,输入如下命令即可: sudo spctl --master-disable

  5. 0504-Hystrix保护应用-Hystrix Dashboard的使用与常见问题总结

    一.概述 Hystrix的主要优势之一是它收集的每个HystrixCommand的度量集合. Hystrix仪表板以高效的方式显示每个断路器的运行状况. 以前查看通过http://localhost: ...

  6. C#超级方便的ExpandoObject类别

    这东西是.NET Framework 4.5 的新东西..发现这个,大概就跟发现新大陆一样的兴奋,让我再次赞叹Anders Hejlsberg 之神.. 这边有MSDN : http://msdn.m ...

  7. python学习之路-第六天-一个简单的脚本

    现在有一个需求:把某个目录下的文件备份到指定到另外一个目录下,而且压缩后文件为zip文件 # -*- coding:utf-8 -*- #! /usr/bin/python # Filename:ba ...

  8. python基础（数字、字符串、布尔值、字典数据类型简介）

    一 执行第一个python程序 1.下载安装python2.7和python3.6的版本及pycharm,我们可以再解释器中输入这样一行代码: 则相应的就打出了一句话.这里的print是打印的意思.你 ...

  9. 450. Delete Node in a BST

    Given a root node reference of a BST and a key, delete the node with the given key in the BST. Retur ...

  10. MiniGUI 显示中文

    修改/usr/local/etc/MiniGUI.cfg # The first system font must be a logical font using RBF device font.[s ...