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,比如我这次就是这步没做好,合并代码时 ...
随机推荐
- 云K8S - AWS容器库ECR(ERS)编排ECS-EKS以及阿里云编排ACS-ACK
云K8S相关 AWS 部分-ECR(ERS) ECS EKS 20180824 Chenxin AWS的容器编排目前分为 ECS 和 EKS 两种. AWS价格说明 Fargate模式的ECS,换算成 ...
- docker下MySQL的主从复制
MySql的主从复制 sudo docker pull MySQL:5.7 拉取MySQL的镜像文件(版本号为 5.7) sudo docker run -p 3339:3306 --name mas ...
- Oracle对时间的相关操作
目录导航: 1. 年操作 2. 月操作 3. 周操作 4. 天操作 5. 时操作 6. 分操作 7. 秒操作 1.年操作 SELECT add_months(SYSDATE, -12) FROM du ...
- 开发一个这样的 APP 要多长时间？
作者:蒋国刚 www.cnblogs.com/guogangj/p/4676836.html 这是一个“如有雷同,纯属巧合”的故事,外加一些废话,大家请勿对号入座.开始了…… 我有些尴尬地拿着水杯,正 ...
- C++ std::stack 基本用法
#include <iostream> #include <string> #include <stack> // https://zh.cppreference. ...
- [译]Vulkan教程(24)索引buffer
[译]Vulkan教程(24)索引buffer Index buffer 索引buffer Introduction 入门 The 3D meshes you'll be rendering in a ...
- [译]Vulkan教程(20)重建交换链
[译]Vulkan教程(20)重建交换链 Swap chain recreation 重建交换链 Introduction 入门 The application we have now success ...
- MongoDB数据库常用SQL命令 — MongoDB可视化工具Robo 3T
1.db.collection.updateMany() 修改集合中的多个文档. db.getCollection('user').find({"pId":"3332a5 ...
- SpringBoot2.0 整合 Redis集群 ,实现消息队列场景
本文源码:GitHub·点这里 || GitEE·点这里 一.Redis集群简介 1.RedisCluster概念 Redis的分布式解决方案,在3.0版本后推出的方案,有效地解决了Redis分布式的 ...
- Python进程池multiprocessing.Pool的用法
一.multiprocessing模块 multiprocessing模块提供了一个Process类来代表一个进程对象,multiprocessing模块像线程一样管理进程,这个是multiproce ...