1

私は非常に基本的なシナリオを持っています.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 が入力されるまで、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 に答える