AngularJS不断观察文本输入

Question

I am wondering if it is posible to constantly watching the text input, like typing a string and then run a function.

I would use it for html game, that if you like type the word pause on a random moment you pause the game.

Is this possible to make? or are there any easy sample scripts? That would help me alot! Thanks!

Answer 1

Let's say you have an input with an ng-model="myTextParam" on it. You can write in your controller the following:

$scope.$watch(function() { return $scope.myTextParam; }, function (newVal, oldVal) {
    if (newVal === "string test") {
       //do whatever
    }
});

Fiddle

Answer 2

You can use $scope.$watch() to run a specific function each time a scope variable changes. You can then check if your string is equal to 'pause'.

$scope.$watch('typeModel', function(newVal, oldVal){
    if(newVal.toLowerCase() === 'pause'){
        alert('Pause!');
    }
});  

Fiddle: http://jsfiddle.net/U3pVM/13834/

Update You can use tricks to hide your input, and making sure it doesn't lose focus.

This css makes sure your html body takes up all the available space:

html,body {
    width: 100%;
    height: 100%;
}

You can register a clickhandler on the body to make sure you always have focus on the input:

document.body.onclick = function(event){        
    document.getElementById('input_field').focus();
}

The autofocus part makes sure the input field gets focus on page load:

<input id="input_field" type="text" ng-model="typeModel" autofocus>

And you can do some css trick to hide your input (not the best example here, but just for demonstration purposes):

input {
    opacity: 0.01;
}

Updated fiddle: http://jsfiddle.net/U3pVM/13847/