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,比如我这次就是这步没做好,合并代码时 ...
随机推荐
- Git 自救指南
Git 虽然因其分布式管理方式,不完全依赖网络,良好的分支策略,容易部署等优点,已经成为最受欢迎的源代码管理方式.但是一分耕耘一分收获,如果想更好地掌握 git,需要付出大量的学习成本.即使在各种 G ...
- 编译出错：must be index or base register
指令 mov ds:[dx],dx 原因:上述指令使用寄存器相对寻址方式,只能使用BX,BP,SI,DI 方括号里必须是变址(index,指SI, DI)或基址(base,指BX, BP)寄存器 正确 ...
- C++ explicit关键字，修饰构造函数，ctor
#include <iostream> // operator Type() 类型操作符重载 // operator int() // operator double() // ... / ...
- vsftpd服务的基本配置
本文环境:CentOS 7 简介 FTP(文件传输协议,File Transfer Protocol)是最古老的协议之一,诞生于1971年,距今已经半个世纪了,它的目的是在不同计算机之间传输文件(实现 ...
- C和C++常见误区以及问题整理
c和c++的关系 c是面向过程的语言,c++是在c的基础上扩展的面向对象的编程语言. c++具备c的所有功能,对c的库完全兼容. c++的标准在98年确定,在那之前已经有一些库大量使用. 新标准中,推 ...
- Ubuntu 合上笔记本不会进入休眠模式
首先 sudo vim /etc/systemd/logind.conf 把文件中的 #HandleLidSwitch=suspend 修改成 HandleLidSwitch=ignore 重启服务 ...
- php获取本机ip
最近在写个东西时,需要获取本机的IP,但是由于php本身不带这样的功能,在网上找了好久也没有一个好办法,突然想到一个好办法,如下代码 <?=gethostbyname($_ENV['COMPUT ...
- Python 调用 Hprose接口、Dubbo接口、Java方法
#!/usr/bin/env python # -*- coding:utf-8 -*- # ************************************* # @Time : 2019/ ...
- SpringCloud的入门学习之Eureka（高可用注册中心HA）构建Provider服务、Consumer服务
1.在高可用的Eureka注册中心中构建provider服务. 使用springboot的多环境配置,来搭建Eureka的高可用集群式部署.由于使用的是maven构建的springboot项目,所以首 ...
- Windowns系统下搭建python环境
本文介绍下在windows系统下安装python和python环境搭建. 安装PYTHON 首先,我们去python的官方网站下载python安装包.官网地址:https://www.python.o ...