【AngularJS 中的事件详解】教程文章相关的互联网学习教程文章

javascript-Angular 4/5中的事件处理程序性能问题【代码】

抱歉,如果我的问题很傻,但是我们在应用程序中遇到了延迟问题.KEYPRESS事件处理程序是罪魁祸首.我们在整个应用程序中使用以下指令.它通过HostListener检查KeyPress.按下键时,此伪指令使用regexp检查值,并且如果condition为false则执行preventDefault.private regexMap = { // add your own'999': /^([0-9]){0,3}$/g,'9999': /^([0-9]){0,4}$/g,...... }@HostListener('keypress', [ '$event' ]) public nInput(event: KeyboardEvent...

javascript-在历史记录popstate事件中获取AngularJs $scope?【代码】

我是新手angularjs开发人员.我有,var app = angular.module('myapp', []); app.controller('ProductCtrl', ['$scope', '$sce', function ($scope, $sce) {$scope.products = myapp.products;$scope.pager = $sce.trustAsHtml(myapp.pager);$scope.getProducts = function($event) {$event.preventDefault();var $link = $($event.target);var url = $event.target.href;$.getJSON(url, function(response) {$scope.$apply(function...

javascript-仅在指定事件上具有animate.css的angularjs吗?【代码】

我可以通过animate.css成功实现angularjs 1.2动画.list.ng-enter{-webkit-animation: fadeInLeft 1s;-moz-animation: fadeInLeft 1s;-ms-animation: fadeInLeft 1s;animation: fadeInLeft 1s; }问题是每当我回来时(例如从新页面回来),就会触发动画.我只想在列表中添加新项目然后动画触发.解决方法:如果我理解您的问题,则您的html应该如下所示:<button type="button" href="url to add new record"></button><ul class=".list"><li...

javascript-使用angular-google-maps不能将click事件绑定到用于显示单个窗口的标记【代码】

我收到一个JSON对象作为标记的数据源.之后,我为每个标记绑定Click / Close函数 朋克:http://plnkr.co/edit/A9IbIFpj3d9tH6z9NYjf?p=previewangular.forEach(tmp, function(value, key){value.onClick = function(){console.log("Clicked!");$scope.selected.show = false;$scope.selected = value;$scope.selected.show = !$scope.selected.show;$scope.$apply();};value.CloseClick = function() {$scope.selected.show = false;...

javascript-更改检测在Angular 2中的指令事件输出中不起作用【代码】

我使用此指令.但是,在setAddress事件输出中,在我的组件中未检测到任何更改.该视图未更新.我不明白 为了进行测试,如果我删除了google.maps.event.addListener,将其替换为一个简单的setTimeout来调用invokeEvent.有用.@Directive({selector: '[googleplace]',providers: [NgModel],host: {'(input)' : 'onInputChange()'} }) export class GoogleplaceDirective {@Output() setAddress: EventEmitter<any> = new EventEmitter();mod...

javascript – angularJS:如何恢复/阻止单选按钮事件?【代码】

我在http://jsfiddle.net/S2kc7/1/中有一个(非工作)示例<radio ng-model="value" ng-value="foo"> <radio ng-model="value" ng-value="bar">如果用户不批准,我想恢复到以前的状态. 例如,如果在用户点击“bar”之前ng-model =“value”在“foo”上,然后用户选择取消,我想阻止该事件,并保持“value = foo”,没有任何改变或观看. 我试过了:$scope.$watch('value', function(){ newvalue = oldvalue }) $scope.clicked = function($ev...

javascript – Angular 2下载带有身份验证的.CSV文件点击事件【代码】

我正在使用spring boot后端,而我的api使用服务通过OutputStreamWriter发送数据.我可以使用像这样的点击事件在Angular 2中下载它: 打字稿results(){ window.location.href='myapicall'; }HTML<button (click)="results()"class="btn btn-primary">Export</button>这很好用;但是,我最近为我的api端点实现了安全性,现在每次尝试拨打电话时都会收到401,因为它没有发送标头. 我写了一个服务,我可以在控制台中看到结果,但我似乎无法弄清...

javascript – jQuery单击不与AngularJS一起使用的事件【代码】

我正在将我的多重php jquery网站转换为单页角度应用程序.但是我已经用jquery编写了很多代码,所以只打算在路由等方面交换php for angular. 我遇到的一个问题是我无法弄清楚的是jquery点击事件我一直在用完,直到转换停止工作.如果我从控制台调用该函数,那么更改代码以使其从ng-click中触发它将起作用. jquery正在工作,我在提到的函数中放了一些jquery,它运行正常.<!doctype html> <html ng-app="myApp"> <head><link href="css/heade...

javascript – Angular2和jQuery’更改’事件【代码】

我有一个隐藏的输入来控制jQuery所做的更改,其中包括一个angular2更改事件,就像这样<input id='input1' hidden (change)='onChange($event)'>然后在我的情况下,我必须使用jQuery来更改此输入的值,然后触发更改事件:$('#input1').val('somevalue').trigger('change');我通过jQuery触发的这个更改事件只适用于jQuery,但不适用于Angular2://This is working $('#input').change(function(){console.log('Change made'); })在angular...

javascript – 如何使用rxjs在angular2中的输入keyup事件上实现去抖服务【代码】

我正在尝试调用输入加密事件的服务. HTML<input placeholder="enter name" (keyup)='onKeyUp($event)'>下面是onKeyUp()函数onKeyUp(event) {let observable = Observable.fromEvent(event.target, 'keyup').map(value => event.target.value).debounceTime(1000).distinctUntilChanged().flatMap((search) => {// call the service});observable.subscribe((data) => {// data}); }从浏览器的网络选项卡中可以看出,它正在调用每个按...

javascript – Angular 2路由器事件监听器【代码】

如何在Angular 2路由器中监听状态变化? 在Angular 1.x中我使用了这个事件:$rootScope.$on('$stateChangeStart',function(event,toState,toParams,fromState,fromParams, options){ ... })所以,如果我在Angular 2中使用这个eventlistener:window.addEventListener("hashchange", () => {return console.log('ok')}, false);它不是返回’ok’,然后从JS更改状态,然后才运行浏览器history.back()函数. 使用router.subscribe()函数作...

javascript – 更改事件的AngularJs元素【代码】

有以下代码:handleFileSelect = (evt) ->console.log(1)file = evt.currentTarget.files[0]reader = new FileReader()reader.onload = (evt) ->$scope.$apply ($scope) ->$scope.myImage = evt.target.resultreader.readAsDataURL(file)angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect)和HTML:<div class="form-group ng-scope"><label class="col-sm-2 control-label" for="image">Image...

javascript – Angular Directive:将’mouseover’事件绑定到元素【代码】

在我的控制器中,我有以下用户数组,将在部分html模板中通过迭代显示 在控制器中:vm.users = [{"username": "johnDoe", "address": "Saltlake City, UT", "age": 34},{"username": "janeDoe", "address": "Denver, CO", "age": 33},{"username": "patrickDoe", "address": "San Francisco, CA", "age": 35}];部分HTML代码:<div ng-repeat="user in mapView.users"> <my-customer info="user"></my-customer></div>myCustomer指令:...

javascript – 在这种情况下,处理AngularJS事件的最佳方法是什么?【代码】

我在AngularJS中绝对是新的,我对如何处理Angular中的事件有以下疑问. 所以我知道如果在某个视图中我有这样的东西:<input type="text" ng-model="handle" />这意味着在dom中的这个输入元素和Angular $scope中的handle变量之间存在双向绑定,例如:$scope.handle = '';因此,发生在此输入对象中的任何更改都意味着更改$scope中的handle属性,反之亦然. 因此,在Angular applcation中,我可以明确地声明一个whatcher// I explicitly decla...

javascript – 在Angular-UI日历​​/ fullcalender中禁用事件大小调整【代码】

对于我们使用angular-ui-calendar进行可视化的事件,我们没有任何持续时间,因此我们不希望用户进行任何调整大小,同时仍然能够拖放事件以将其移动到另一个日期和时间.我在哪里可以配置?$scope.uiConfig = {calendar: {height: 450,editable: true,// here?! resizable: false won't work$scope.events = [{// or here? resizable: false won't do anythingtitle: "Test", start: new Date(2014, 0, 1, 12, 0), end: new Date(2014, ...