1

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

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 引导程序：

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

1 回答 1

2

发生这种情况是因为 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，则它始终可以正常工作。

于 2014-12-25T02:01:01.077 回答