只有用戶第一次輸入表單輸入時才運行函數

這應該是直截了當的，但還沒有找到解決方案。只有用戶第一次輸入表單輸入時才運行函數

我有一個input在form。我想要檢測用戶何時與輸入交互並運行一個JavaScript函數一旦如果他們有。

我一直在考慮使用$watch來檢測input元素是否具有類ng-dirty，如果它具有，請運行js函數並取消綁定手錶。

有沒有更好的方法？如果你能提供一個例子，那將是非常棒的。

2015-04-02 nilsi

這是一個簡單的指令，應該做你想要的。

angular.module('myApp', []) 
 
.controller('MyCtrl', function($scope) { 
 
    $scope.bar = function() { 
 
    console.log('bar was called!'); 
 
    $scope.barWasCalled = true; 
 
    }; 
 
}) 
 
.directive('once', function() { 
 
    return { 
 
    require: 'ngModel', 
 
    scope: { 
 
     fn: '&once' 
 
    }, 
 
    link: function($scope, $element, $attrs, ngModel) { 
 
     // add a listener and save the index for removal 
 
     var idx = ngModel.$viewChangeListeners.push(function() { 
 
     // user typed, run the function 
 
     $scope.fn(); 
 
     // remove the listener 
 
     ngModel.$viewChangeListeners.splice(idx, 1); 
 
     }) - 1; 
 
    } 
 
    }; 
 
}) 
 
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <input type="text" ng-model="foo" once="bar()" placeholder="type something..."> 
 
    <div ng-show="barWasCalled">Bar was called!</div> 
 
</div>

$viewChangeListener只是提供一個觸摸更好的性能比$watch，雖然它名義上反正。

請記住將任何類型的DOM相關行爲（如此類）放入指令中。這使事情保持輕鬆和整潔。

來源

2015-04-02 04:44:53 m59

$手錶不是那個。 $ watch實際上並不關注你是否從角度範圍之外改變某些東西。

要麼你可以使用NG-改變事件的互動與輸入或使用原始的javascript的onChange使用自定義的指令，並調用範圍$消化終於

簡單的解決辦法是使用NG-變化：

<input type="text" name="test" ng-change="doChanges()" />

來源

2015-04-02 04:33:55 Samir

您還可以在指令上使用$ watchCollection。它會返回一個取消註冊功能，您可以調用該功能來取消綁定表格上的手錶。這樣做的好處是它可以觀察表格，而不是模型或任何特定的輸入。這樣，只要表單上的任何輸入被修改，$ watchCollection的回調函數就會被執行並刪除。

(function() { 
 
    'use strict'; 
 

 
    angular.module('app', []); 
 

 
    angular.module('app') 
 
    .directive('mainForm', mainForm); 
 

 
    mainForm.$inject = ['$log']; 
 

 
    function mainForm($log) { 
 
    var directive = { 
 
     restrict: "A", 
 
     scope: { 
 
     myForm: "=ngForm" 
 
     }, 
 
     link: link 
 
    }; 
 

 
    return directive; 
 

 
    function link(scope, element, attrs, controller) { 
 
     var undoWatch = scope.$watchCollection('myForm', function(newVal, oldVal) { 
 
     //check if the form is dirty 
 
     if (newVal.$dirty) { 
 
      alert("do this one time!"); 
 
      //unbind the function so we don't do it again 
 
      undoWatch(); 
 
     } 
 
     }); 
 
    } 
 

 
    } 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="app"> 
 
    <h1>Do Action Once Example</h1> 
 
    <div ng-form="example" main-form novalidate> 
 
    <p> Use any input on the page to alert the user one time.</p> 
 
    <input ng-model="inputVal" type="text" class="form-control" /> 
 
    <input ng-model="anotherInputVal" type="checkbox" class="form-control" /> 
 
    </div> 
 
    <p>{{ inputVal }}</p> 
 
</body> 
 

 
</html>

來源

2015-04-02 05:30:13

只有用戶第一次輸入表單輸入時才運行函數

回答

相關問題