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

在我看来，我试图使用formData将ngModel对象属性挂钩到某些表单字段。但是，在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 bootstrapper ：

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

Answer 1

这是因为网址验证程序，请注意在您输入有效网址之前如何移除整个网址属性，以及当您开始收到提醒时。基本上，一旦删除，在输入有效（和不同的）网址之前，永远不会认为网址会被更改。

url设置为＆＃39;测试＆＃39;
您在框中输入任何内容，它未通过验证并变为未定义
在您输入有效网址（它没有更改）

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

我想到的唯一合乎逻辑的解决方案是您之前使用过不同的输入类型，因此您不需要进行验证。如果您将类型更改为text，则整个过程都可以正常运行。

formData不会随ngChange挂钩而改变

1 个答案: