formData 不随 ngChange 钩子改变

Question

我有一个非常基本的场景，其中我有一个带有一个控制器的模块：

var myModule = angular.module('myModule', []);

myModule.controller('myModuleCtrl', function ($scope, $http) {
    $scope.formData = {url:'',title:'',source:''};

    $scope.init = function() {
        $scope.formData.url = 'Test';
        $scope.formData.title = '';
        $scope.formData.source = '';
    };

    $scope.manageUrl = function() {
        alert('update');
    };
});

在我看来，我正在尝试使用ngModel 将formData 对象属性与某些表单字段挂钩。但是，init() 方法运行后，我的输入不会更新它的值。如果我添加ngChange 指令并将其与$scope.manageUrl() 方法挂钩，它只会在我第一次击键/更改输入之后运行一次。

我在这里遗漏了什么吗？我之前使用过这两个指令没有任何问题。我唯一能想到的就是我的模块/控制器设置有问题？

这就是我的视图的样子：

<div ng-app="myApp" ng-controller="myModuleCtrl" ng-init="init()">
    <div>
        <form name="myForm">
            <div>
                <input type="url" ng-model="formData.url" ng-change="manageUrl()" />
            </div>
        </form>
    </div>
</div>

还有我的 application.js 引导程序：

var app = angular.module('myApp', ['myModule']);

Answer 1

这是由于 url 验证器而发生的，请注意整个 url 属性是如何被删除的，直到您输入一个有效的 url，那时您将开始获取您的警报。基本上，一旦删除，在输入有效（和不同）的 url 之前，永远不会认为 url 被更改。

• 网址设置为“测试”
• 您在框中输入任何内容，验证失败并变为未定义
• 在您输入有效的 url 之前，它保持未定义（它不会改变）

开始输入http://anything，看看你自己会发生什么：

var myModule = angular.module('myModule', []);

myModule.controller('myModuleCtrl', function ($scope, $http) {
    $scope.formData = {url:'',title:'',source:''};
    $scope.init = function() {
        $scope.formData.url = 'Test';
        $scope.formData.title = '';
        $scope.formData.source = '';
    };

    $scope.manageUrl = function() {
        alert('update');
    };
});

var app = angular.module('myApp', ['myModule']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myModuleCtrl" ng-init="init()">
    <div>
        <form name="myForm">
            <div>
                <input type="url" ng-model="formData.url" ng-change="manageUrl()" />
              
              <br>
              {{formData}}
            </div>
        </form>
    </div>
</div>

---

我在这里遗漏了什么吗？我之前使用过这两个指令没有任何问题。我唯一能想到的就是我的模块/控制器设置有问题？

我想到的唯一合乎逻辑的解决方案是您以前使用过不同的输入类型，因此您不需要进行验证。如果您将类型更改为text，它始终可以正常工作。