AngularJS：簡單模糊功能

我是AngularJS的新手。從W3school瞭解到。現在繼續前進，瞭解如何使用其他網站的模糊功能和ui-event。所以我得到了這個不工作的代碼，請讓我知道調用模糊函數的原因或更好的方法。AngularJS：簡單模糊功能

HTML

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

腳本標籤

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

來源

2014-10-29 Syed Daniyal Asif

您是否注入了以下模塊以投影http://angular-ui.github.io/ui-utils/？ – 2014-10-29 10:45:02

是的，但爲什麼我的代碼不工作？ – 2014-10-29 10:48:17

我建議使用ngBlur從AngularJS箱。

該指令成爲可從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使用。

來源

2014-10-29 10:51:37

是的，它的工作謝謝你。但如果我想使用ui事件？ – 2014-10-29 11:00:57

@ user3745183，請參閱我的回答，我已更新它。 – 2014-10-29 11:27:37

使用這個網站碼：

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

來源

2014-10-29 10:50:14

如果我想使用ui事件？ – 2014-10-29 10:51:24

我認爲在角度js中沒有uiEvent指令。 – 2014-10-29 11:02:16

您可以使用角UI @http://angular-ui.github.io/ui-utils/其提供模糊，對焦，雙擊事件或者將回調綁定到Angular Js本身不支持的任何事件上

下面是模糊事件的例子之一：

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

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

如果你不想使用的角度，用戶界面的UI事件，您還可以創建一個小的指令，直到角突的下一個版本發佈。

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()" />

基本上指令確實是綁定元素的模糊事件（在本例中輸入），然後當事件是什麼被解僱（我們離開輸入）角將適用於指令中的內容。所以在我們的例子中，如果我們離開輸入，doFoo（）將被觸發。

Plunker這裏：http://plunker.co/edit/J4ZEB6ppvkiIvdW9J2VU?p=preview

來源

2014-10-29 10:51:27

您需要安裝UI-utils的庫爲：安裝此使用下面的命令：

$ bower install --save angular-ui-utils

這個庫添加到refrence指數。HTML

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

注入dependecy這樣到主要模塊：

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'); 
    }; 
}

來源

2014-10-29 11:19:17

我發現這個溶液在波紋管和如果你不想要，它可以正常工作在你的項目中添加更多依賴項（angular-ui）。

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

別擔心！ '$範圍'和所有角度的東西將在那裏！不過，我已經使用函數調用的「表達」在另一個場合，「NG模糊」和它的工作呢！爲什麼不工作有時對我來說是一個謎（沒有錯誤信息）！無論如何，這是「最後的資源」，對我來說工作得很好！

享受！

來源

2016-12-29 15:17:01

AngularJS：簡單模糊功能

回答

相關問題