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,比如我这次就是这步没做好,合并代码时 ...
随机推荐
- 如何使用coe_load_sql_profile.sql来固定sql profile
SQLT工具包含一个脚本,名字是 coe_load_sql_profile.sql,下面以用户SCOTT的EMP表为例,说明如何使用该脚本固定sql profile. 1. SQL> -- 对e ...
- post请求四种传送正文的方式
一.简介 HTTP协议规定post提交的数据必须放在消息主体(entity-body)中,但协议没有规定数据必须使用什么编码方式.HTTP协议是以ASCII码传输,建立再TCP/IP协议之上的应用层规 ...
- react 项目引入路由
下载路由包 npm i react-router-dom -d 前台路由 登陆: /login /login.jsx App.js import React ,{Component} from 're ...
- core-js@3带来的惊喜
core-js 这个名词肯定很多人没听过,今天也是在配置babelpolyfill方法发现的 起因 在使用useBuiltIns:usage按需加载polyfill时,npm run build,就出 ...
- vue安装遇到的5个报错小结
前言 这篇博文不会教你怎么安装vue,但会告知安装过程中可能遇到的5个问题 2017年我写过一篇安装vue的博客,详情:https://www.cnblogs.com/tu-0718/p/752109 ...
- .NET多线程知识快速学习
多线程是一个不会过时的话题,因为每个开发的成长必然要掌握这个知识点,否则半懂不懂怎么保证系统的可靠性和性能,其实在网上随便一搜都会有海量的文章说这个话题,大多数写得很细写得非常好,但发现很少有概览性的 ...
- slave_master_info和slave_relay_log_info中的Master_log_pos不一致
最近在研究mysql的主从,发现一个问题,我在主库做任何修改时,在从库中只有slave_relay_log_info中的Master_log_pos在变化,而slave_master_info中的Ma ...
- distinct关键字对执行计划的影响
一.前言 最近看到一段话,"count(distinct 列名)若列上有索引,且有非空约束或在where子句中使用is not null,则会选择索引快速全扫描.其余情况则选择全表扫描&qu ...
- [Spring cloud 一步步实现广告系统] 9. 主类和配置文件
搜索系统启动主类 /** * AdSearchApplication for 广告搜索服务启动类 * * @author <a href="mailto:magicianisaac@g ...
- ASP.NET Core 2.2 WebApi 系列【二】使用EF CodeFirst创建数据库
Code First模式 Code First是指"代码优先"或"代码先行". Code First模式将会基于编写的类和配置,自动创建模型和数据库. 一.准备 ...