angularjs ng-if妙用，ng-if解决父子组件异步传值
壹 ❀ 引
angularjs开发中，组件件相互通信传值是再普遍不过的操作了，比如我在父作用域中获取了一个数据，想要传递给子组件使用，做简单的做法就是通过scope传递，比如这样：
<body ng-controller="myCtrl as vm">
<echo-demo data='vm.echo'></echo-demo>
</body>
angular.module('myApp', [])
.controller('myCtrl', function ($timeout) {
let vm = this;
vm.echo = {
name: '听风是风'
};
}).directive('echoDemo', function () {
return {
restrict: 'EA',
template: '<div>{{$ctrl.name.name}}</div>',
replace: true,
scope: {
data: '<'
},
controllerAs: '$ctrl',
controller: function ($scope) {
let self = this;
self.$onInit = function () {
self.name = $scope.data;
};
}
}
});
拷贝，正常子组件会显示 听风是风。
我们将问题升级，假设父获取的数据为异步操作，比如我们将上方代码中父控制器的变量外层添加定时器模拟异步操作，其它不变：
$timeout(() => {
vm.echo = {
name: '听风是风'
};
}, 3000);
你会发现这样子组件就拿不到数据了，因为异步的问题，子组件初始化会先执行，此时数据为undefined。那么怎么解决呢？
贰 ❀ 解决异步通信
第一种最常见，直接不用scope传递了，改用事件通信，父什么时候拿到值，就开始派发事件，子组件内响应监听。
// 父作用域 利用定制器模拟异步请求
$timeout(() => {
$scope.$broadcast('传数据啦',data);
}, 3000);
// 子作用域
$scope.$on('传数据啦', function (event, data) {
// 拿到data了...
});
有没有更简单的办法，有，给组件名上添加一个ng-if就好了，像这样：
<echo-demo data='vm.echo' ng-if="vm.echo"></echo-demo>
添加了ng-if后你会发现即便父作用域初始化数据外层有$timeout也没关系，这是因为ng-if的本意就是，当ng-if后的数据什么时候不为false才加载dom，所以这里就成了什么时候父作用域拿到数据，组件才开始渲染加载。
真的是很巧妙的借用了ng-if的特性，解决了异步传值的问题。大家如果对于angularjs事件通信有疑问可以阅读 angularjs事件通信$on，$emit，$broadcast详解 这篇文章。
那么本文结束。
angularjs ng-if妙用，ng-if解决父子组件异步传值的更多相关文章
- angular报错：angular.min.js:118Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq
报错代码如下: <div ng-controller="HelloAngular"> <p>{{greeting.text}},angular</p& ...
- 不知道张(zhāng)雱（pāng）是谁？你out了！
张(zhāng)雱(pāng)是谁?也许你已经听说过了,也许你还没听说过呢,不过你一定听说过老刘——刘强东,没错,这二人是有关系的,什么关系,京东是老刘的,而张雱呢?张雱是京东旗下52家关联公司法人代 ...
- NO17--vue父子组件间单向数据流的解决办法
在上一篇中讲解了父子组件之间是如何传值的,如果子组件需要改变传过来的数据供自己使用,或者想在子组件中改变传过来的数据并同步到父组件,那么直接改肯定是不行的,如果你这么做了,Vue 会在控制台给出警告. ...
- vue bus方式解决非父子组件间的传值
对于非父子组件之间的传值 通常使用VUEX 和总线等方式解决 这里我聊聊发布订阅模式(总线) <body> <div class="app"> <ch ...
- 使用Promise链式调用解决多个异步回调的问题
使用Promise链式调用解决多个异步回调的问题 比如我们平常经常遇到的一种情况: 网站中需要先获取用户名,然后再根据用户名去获取用户信息.这里获取用户名getUserName()和获取用户信息get ...
- angularJS中directive父子组件的数据交互
angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...
- 百度ueditor解决页面组件被覆盖问题
本文不再更新,可能存在内容过时的情况,实时更新请移步原文地址:百度ueditor解决页面组件被覆盖问题: 在使用ueditor的过程中,会出现表单组件被ueditor覆盖的问题,解决的方式如下: ue ...
- ［angular2/4/8］用ng new创建项目卡住的解决办法
官方文档 英文版:https://angular.io/guide/quickstart 中文版:https://angular.cn/guide/quickstart Installing pack ...
- angular.min.js:118 Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq?
1,错误如图所示 简单说下错误原因是:没有js没有注册进去. 解决方法: 1.看下index.html有没有引入你的js文件. 2.看下app.js有没有注册js,比如我这次就是这步没做好,合并代码时 ...
随机推荐
- HttpClient发起Http/Https请求工具类
<dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpcl ...
- spring data JPA entityManager查询 并将查询到的值转为实体对象
spring data JPA entityManager查询 并将查询到的值转为实体对象 . https://blog.csdn.net/qq_34791233/article/details/81 ...
- Ubuntu16.04VIM无法补全错误记录
先记录一下YouCompleteMe的安装过程. 按照教程进行安装 1. 安装 vundle # vundle是vim的包管理器,十分好用 cv@cv: ~$ git clone https://gi ...
- 网络编程懒人入门(十)：一泡尿的时间，快速读懂QUIC协议
1.TCP协议到底怎么了? 现时的互联网应用中,Web平台(准确地说是基于HTTP及其延伸协议的客户端/服务器应用)的数据传输都基于 TCP 协议. 但TCP 协议在创建连接之前需要进行三次握手(如下 ...
- Tomcat中的观察者模式
1. 几个重要的类,接口 LifeCycle : 主题接口 LifeCycleBase : 抽象的主题实现 LifeCycleListener : 观察者 2. 具体分析 public interfa ...
- HTML5 3D 在智慧物业/地产管理系统中的应用
概述 该博文主要展示采用 HT for Web 提供的可视化技术,对智慧房产.智慧物业相关方向的可视化呈现做的一点尝试. 传统的 智慧房产/楼宇自动化/智慧物业 常会采用 BIM(建筑信息模型 Bui ...
- SQL查询语法30例
学好SQL查询:无他,概手熟耳. 1. 基础表: 学生表: 老师表: 课程表: 成绩表: 2. 题目: 1.查询名字中含有"华"字的学生信息 select * from 学生 wh ...
- DNS解析服务结构图
1.DNS(domain name system) 域名 <==> IP地址 DNS解析过程:
- Java题库——Chapter5 方法
1)Suppose your method does not return any value, which of the following keywords can be used as a re ...
- Actor模型（分布式编程）
Actor的目的是为了解决分布式编程中的一系列问题.所有消息都是异步交付的,因此将消息发送方与接收方分开,正是由于这种分离,导致actor系统具有内在的并发性:可以不受限制地并行执行任何拥有输入消息的 ...