Question

我是AngularJS的新手。从W3school学到的。现在开始了解模糊函数和ui-event如何在其他网站上运行。所以我得到的代码不起作用请告诉我原因或更好的方法来调用模糊功能。

HTML

    <div ng-app="" ng-controller="testing" >
    <input ui-event="{ blur : 'blurCallback()' }">
    </div>

脚本标记

function testing($scope){
    $scope.blurCallback = function() {
    alert('Goodbye');
    };
}

Answer 1

我建议使用AngularJS框中的ngBlur。

该指令从Angular的1.2版本开始提供。

<div ng-controller="MyCtrl">
    <input type="text" ng-model="blurModel" ng-blur="onBlur($event)"/>
</div>

function MyCtrl($scope) {
    $scope.onBlur = function($event) {
        console.log($event);
    }
}

我已为您附上JSFiddle示例。

如果您想使用UI.Utils库，您应该将'ui.utils'模块注入项目。

var app = angular.module('plunker', ['ui.utils']);

app.controller('MainCtrl', function($scope) {
    $scope.onBlur = function($event) {
        console.log($event);
    };
});

<body ng-controller="MainCtrl">
    <input type="text" placeholder="ui-utils" ui-event="{blur:'onBlur($event)'}"/>
</body>

Plunker使用ui.utils。

Answer 2

使用此HTML代码：

<div ng-app="" ng-controller="testing" >
    <input ng-blur="blurCallback($event)">
</div>

Answer 3

您可以使用Angular UI @ http://angular-ui.github.io/ui-utils/提供Blurs，Focus，Double-Clicks事件或将回调绑定到Angular Js本身不支持的任何事件

以下是模糊事件的一个例子：

<input ui-event="{ blur : 'blurCallback()' }">

<script> 
  $scope.blurCallback = function() {
   alert('Goodbye'); 
  }; 
</script>

如果您不想使用angular-ui的ui事件，您还可以创建一个小指令，直到下一版本的Angularis发布。

app.directive('ngBlur', function() {
  return function( scope, elem, attrs ) {
    elem.bind('blur', function() {
      scope.$apply(attrs.ngBlur);
    });
  };
});

只需将指令放在您需要的位置：

<input type="text" ng-model="foo" ng-blur="doFoo()" />

基本上，该指令的作用是绑定元素的blur事件（在我们的示例中为输入），然后在触发事件时（我们保留输入）angular将应用指令中的内容。因此，在我们的情况下，如果我们离开输入，将触发doFoo（）。

此处的Plunker：http://plunker.co/edit/J4ZEB6ppvkiIvdW9J2VU?p=preview

Answer 4

你需要为此安装ui-utils库：使用以下命令安装：

$ bower install --save angular-ui-utils

将此库的参考添加到index.html

<script type="text/javascript" src="app/bower_components/angular-ui-utils/modules/event/event.js"></script>

将这样的依赖注入主模块：

angular.module('myApp', ['ui.event'])

html代码：

<div ng-app="" ng-controller="testing" >
    <input ui-event="{ blur : 'blurCallback()' }">
</div>

控制器代码：

function testing($scope){
    $scope.blurCallback = function() {
    alert('Goodbye');
    };
}

Answer 5

我在下面找到了这个解决方案，如果您不想在项目中添加更多依赖项（angular-ui），则可以正常工作。

onblur="angular.element(this).scope().yourFuncion()"

别担心！ '$ scope'和所有有角度的东西都会在那里！但是，我在另一个场合使用函数调用作为“ng-blur”的“表达式”，它也起作用了！为什么不工作有时对我来说是一个谜（没有错误信息）！无论如何，这是“最后的资源”，对我来说很好！

享受！

Answer 6

您可以使用以下 Html 代码解决上述问题

<div ng-app="" ng-controller="testing" >
    <input ng-blur="blurCallback($event)">
</div>

AngularJS：简单的模糊功能

6 个答案: