ng-events类似ionic中Events的angular全局事件

介绍

ng-events 在 Angular 2 以上的版本中使用，类似于 ionic 中的 Events。可以使用 ng-events 注册一个全局事件，然后在需要的时候触发这个事件。

GitHub地址

快速开始

npm install ng-events --save

在 Angular 6 以上的版本中使用,修改 angular.json 文件, 在Angular 6以下版本中使用，修改.angular-cli.json文件

 "scripts": [
       "node_modules/ng-events/dist/ng-events.js"
       // ...
      ]

当然也可以直接在index.html中引入，不过并不推荐这么做。

注册事件

•你可以使用 ngEevents.on 注册一个全局事件:

ngEvents.on('eventName', function (item) {
  console.log(item.name + ' was selected!');
});

第一个参数是事件的唯一名称。 第二个参数是在触发指定事件时调用的回调函数。

•您可以使用 ngEvents.off 方法取消注册的事件。

触发事件

使用 ngEvents.trigger 触发一个全局事件:

ngEvents.trigger('eventName', {
  id: 42,
  name: 'Pencil'
});

第一个参数是事件的唯一名称. 第二个是（可选）事件参数。

你可以添加任意数量的参数并在回调方法中获取它们。

总结

以上所述是小编给大家介绍的ng-events类似ionic中Events的angular全局事件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • ionic3+Angular4实现接口请求及本地json文件读取示例

    ionic3+Angular4实现接口请求及本地json文件读取示例

    一 准备工作 首先,ionic3+Angular4的开发环境你得有,这里就不赘述.环境准备好,创建一个空白项目,模板自选. 二 实现过程 1 新建json文件和service service记得在app.module.ts中引用 json和service 2 json文件格式 格式类似这样,根据实际需求决定. [ { "id":"1", "name":"xiehan", "age":"24&quo

  • 利用Ionic2 + angular4实现一个地区选择组件

    前言 本文主要给大家介绍的是关于利用Ionic2 + angular4实现一个地区选择组件的相关内容,为什么会有这篇文章?主要是因为最近在项目重构的过程中,发现之前用mobiscroll写的地区选择指令在angular2中很难重用(毕竟是用typeScript).于是就萌生了自己写一个组件的想法. 想和之前一样基于mobiscroll去写,但是发现非常耗费精力,于是某日万般无奈这下搜了一下相关的组件,不出所料已经有人写了.https://www.npmjs.com/package...但是此组件

  • Ionic + Angular.js实现图片轮播的方法示例

    Ionic + Angular.js实现图片轮播的方法示例

    本文主要给大家介绍了关于Ionic + Angular实现图片轮播的相关资料,分享出来供大家参考学习,需要的朋友们下面来一起看看吧. 先来看看实现的效果图: 方法示例: template文件夹新建slider.html <ion-view view-title="图片轮播"> <ion-content class="padding" scroll="false"> <ion-slides class="sl

  • angular+ionic返回上一页并刷新页面

    假定当前页面为editCata页面,要返回的是cataDetail页面.目前我找到两种方法实现返回上一页并刷新,如果以后有其它方法,再继续添加. 1.在editCataCtrl.js中注入$ionicHistory服务. 使用$ionicHistory.goBack()方法即可返回到上一页面. JS端代码: $scope.goBack=function(){ $ionicHistory.goBack(); } HTML代码: <button class="button button-cle

  • AngularJS之ionic 框架下实现 Localstorage本地存储

    AngularJS之ionic 框架下实现 Localstorage本地存储

    前言: 我们前台用的是ionic+AngularJS,做的是混合模式移动应用.最近有一个需求是,我在页面A上面滑动的时候,跳入页面B,页面B需要加载页面A的数据,这样的页面传值如何实现呢?那就需要用到LocalStorage本地存储了. Ionic Ionic是目前最有潜力的一款HTML5手机应用开发框架.通过SASS构架应用程序,他提供了很多UI控件来帮助开发者开发强大的应用.加上angularjs可以让ionic应用体验度增强.代码也非常简单.angularjs可以提供数据的双向绑定,使用它

  • Ionic+AngularJS实现登录和注册带验证功能

    Ionic+AngularJS实现登录和注册带验证功能

    登录: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <li

  • angular+ionic 的app上拉加载更新数据实现方法

    第一步,首先需要在<ion-content>标签里面加入标签<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="5%"></ion-infinite-scroll> 里面的属性解释, ng-if  值 布尔型,如果为true,则可以触发上拉事件 on-infinite 上拉时触发的事件 distance 列表底部滚动到可

  • ng-events类似ionic中Events的angular全局事件

    介绍 ng-events 在 Angular 2 以上的版本中使用,类似于 ionic 中的 Events.可以使用 ng-events 注册一个全局事件,然后在需要的时候触发这个事件. GitHub地址 快速开始 npm install ng-events --save 在 Angular 6 以上的版本中使用,修改 angular.json 文件, 在Angular 6以下版本中使用,修改.angular-cli.json文件 "scripts": [ "node_mod

  • 在 Vue.js中优雅地使用全局事件的方法

    Vue 2.0 版本中取消了 v1 中的 $broadcast 方法,因此要使用全局事件时,不可避免地会使用到 event-bus 之类的方法,本文旨在提出一种不需要用到 event-bus 的全局事件使用方法. 主要思路是将事件全部绑定在 $root 上,并为所有全局事件添加一个前缀防止冲突,再通过向 $options 上注入新的 key 来简化使用方式. 以下为 mixin 文件代码 // event-mixin.js export default { created() { if (thi

  • laravel创建类似ThinPHP中functions.php的全局函数

    前言 一直觉得ThinPHP中的公共函数是一个很好的设计,因为我们只需要在functions.php中对共用的函数进行封装,然后就可以在全局直接进行调用了.其实Laravel中也有类似的功能的,比如说助手函数,类似于session()等函数,这些助手函数也是全局可以调用的,非常的方便. 下面总结一下,两者之间的差别以及相同点. TP3系列中functions.php文件默认其实是空文件,很好找.我们可以直接封装代码. Laravel5系列中的path/vendor/laravel/framewo

  • 详解ABP框架中领域层的领域事件Domain events

    在C#中,一个类可以定义其专属的事件并且其它类可以注册该事件并监听,当事件被触发时可以获得事件通知.这对于对于桌面应用程序或独立的Windows Service来说非常有用.但是, 对于Web应用程序来说会有点问题,因为对象是根据请求(request)被创建并且它们的生命周期都很短暂.我们很难注册其它类别的事件.同样地,直接注册其它类别的事件也造成了类之间的耦合性. 在应用系统中,领域事件被用于解耦并且重用(re-use)商业逻辑. 事件总线 事件总线为一个单体(singleton)的对象,它由

  • ionic中列表项增加和删除的实现方法

    ionic中列表项增加和删除的实现方法

    在项目中遇到表单似的页面,需要进行增加一行和减少一行的操作,例如: 要实现可以选中商品,以及对商品的信息列表进行显示与否的操作 html代码如下: <div class="chanpinxiangqing"> <div class="item item-divider">产品明细</div> <div class="chanpinxiangqing" ng-repeat="master in m

  • 郁闷!ionic中获取ng-model绑定的值为undefined如何解决

    今天在ionic中使用ng-model时候,在对应的controller里面获得值为undefined.以前在使用angularjs的ng-model绑定时候就可以拿到的啊,这就尴尬了,决定一探究竟.大家先看下面的一个demo. 在学习angularjs的ng-model的数据双向绑定时候,我们通过以下的代码拿到对应的ng-model的值: demo1 <div ng-app="myApp" ng-controller="myCtrl"> 名字: <

  • 原生js实现复制对象、扩展对象 类似jquery中的extend()方法

    jq的extend()方法能很方便的实现扩展对象方法,语法如下:$.extend(obj1,boj2,obj3); 现在要实现的是:原生js实现复制对象,扩展对象,类似jq中的extend()方法,具体实例如下: 现有3个对象字面量: var o1={hello:1,old:555}, o2 = { abc: 55555555, hello: 2, fun: function() { alert(111); } }, o3={third:9999}; 实现目标: 复制o1对象,把 o2,o3的对

  • javascript实现类似java中getClass()得到对象类名的方法

    本文实例讲述了javascript实现类似java中getClass()得到对象类名的方法.分享给大家供大家参考.具体如下: 在javascript中没有能够返回特定类型名的函数 如一个对象 console.log(obj); 得到的是[object HtmlTableCellElement]如果想要一个函数能够返回HtmlTableCellElement js中默认没有这样的函数 可以自己实现一个 var getObjectClass = function (obj) { if (obj &&a

  • Go语言实现类似c++中的多态功能实例

    前言 Go语言作为编程语言中的后起之秀,在博采众长的同时又不失个性,在注重运行效率的同时又重视开发效率,不失为一种好的开发语言.在go语言中,没有类的概念,但是仍然可以用struct+interface来实现类的功能,下面的这个简单的例子演示了如何用go来模拟c++中的多态的行为. 示例代码 package main import "os" import "fmt" type Human interface { sayHello() } type Chinese s

  • ionic中的$ionicPlatform.ready事件中的通用设置

    前言 $ionicPlatform.ready事件是用于检测当前的平台是否就绪的事件,相当于基于document的deviceready事件, 在app中一些通用关于设备的设置必须在这个事件中处理, 为了代码的可读性,我们把设置功能封装成一个方法, 只要在该事件中调用就行了. 关键代码和说明 .factory('setCommon', [ '$ionicPlatform', '$location', '$timeout', '$cordovaToast', '$ionicNativeTransi

随机推荐