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,比如我这次就是这步没做好,合并代码时 ...
随机推荐
- QT--吃月亮小游戏
QT--吃月亮小游戏 简介: 该设计使用了鼠标事件.键盘事件.绘图事件,可通过鼠标或者方向键控制人物移动吃到月亮 代码: 1.widget.h文件: #ifndef WIDGET_H #define ...
- asp.net实现SQL2005的通知数据缓存
首先第一步是确保您的 Service Broker 已经激活,激活 Service Broker (Transact-SQL)如下: USE master ; GO ALTER DATABASE Yo ...
- Python语法速查： 7. 函数基础
返回目录 (1)函数基本 ● 函数是第一类对象 Python中万物皆对象,所有对象都是第一类的(first class),函数也不例外,也是第一类对象.既然是对象,那就可以当作普通的对象数据处理,比如 ...
- Java之DateFormat类
DateFormat类概述 java.text.DateFormat 是日期/时间格式化子类的抽象类,我们通过这个类可以帮我们完成日期和文本之间的转换,也就是可以在Date对象与String对象之间进 ...
- [译]Vulkan教程(09)窗口表面
[译]Vulkan教程(09)窗口表面 Since Vulkan is a platform agnostic API, it can not interface directly with the ...
- [译]Vulkan教程(04)基础代码
[译]Vulkan教程(04)基础代码 General structure 通用结构 In the previous chapter you've created a Vulkan project w ...
- Web安全测试学习笔记-DVWA-SQL注入-2
接上一篇SQL注入的学习笔记,上一篇我通过报错信息得知后台数据库是MySQL(这个信息非常重要~),然后通过SQL注入拿到了用户表的所有行,其实我们还可以通过MySQL的特性来拿更多的信息. 1. 获 ...
- C++ 词汇表
C++词汇表 A abort() 特殊函数 如果一个函数抛出异常,但在通往异常函数的调用链中找不到与之匹配的catch,则该程序通常以此函数调用终止 abs ...
- Java入门系列之集合Hashtable源码分析（十一）
前言 上一节我们实现了散列算法并对冲突解决我们使用了开放地址法和链地址法两种方式,本节我们来详细分析源码,看看源码中对于冲突是使用的哪一种方式以及对比我们所实现的,有哪些可以进行改造的地方. Hash ...
- goweb- 对请求的处理
对请求的处理 Go 语言的 net/http 包提供了一系列用于表示 HTTP 报文的结构,我们可以使用它 处理请求和发送相应,其中 Request 结构代表了客户端发送的请求报文,下面让我们看 一下 ...