Question

您如何对模型更改做出反应以触发一些进一步的操作？例如，假设您有一个名为email的输入文本字段，并且您希望在用户开始输入其电子邮件时立即触发或执行某些代码。

HTML标记：

<input type="email" ng-model="app.email">

CTRL：

.controller('controller', function ($scope) {

});

Answer 1

<input ng-change="myFunction()" type="email" ng-model="app.email">

Answer 2

我们可以在我们的控制器中使用$ watch函数实现这一目的：

function MyCtrl($scope) {
    $scope.email = "";

    $scope.$watch("email", function(newValue, oldValue) {
        if ($scope.email.length > 0) {
            console.log("User has started writing into email");
        }
    });
}

或者我们可以编写一个简单的指令来监听输入事件。

.controller('controller', function ($scope) {
    $scope.changes = 0;
    $scope.change = function () {
        console.log('change');
        }

.directive('changeWatch', function() {
    return {
        scope: {
            onchange: '&changeWatch'
        },
        link: function(scope, element, attrs) {
            element.on('input', function() {
                scope.$apply(function () {
                    scope.onchange();
                });
            });
        }
    };
});

角度对模型变化做出反应

2 个答案: