0

次のようなさまざまな入力 (後で説明するディレクティブを含む) があります。

<input mask-value="ssn" validate="checkSsn"/>
<input mask-value="pin" validate="checkPin"/>

これらのプロパティはコントローラーにあります。

app.controller("Ctrl", ['$scope', function ($scope) {
    $scope.ssn = "";
    $scope.pin = "";

    $scope.checkSsn = function () { /* validate $scope.ssn */ };
    $scope.checkPin = function () { /* validate $scope.pin */ };
}]);

最後に、maskValueディレクティブ:

app.directive("maskValue", function () {
    return function (scope, element, attrs) {
        /* does some focus/blur magic and string replacement */
        scope[attrs.maskValue] = this.value;
        scope[attrs.validate]();
    };
});

これは機能しますが、Angular の誤用のように思えます。代わりに、次のように分離スコープを使用する方が理にかなっています。

    scope: {validate: "&"}

次に、scope.validate()の代わりに使用できますscope[attrs.validate]()。 ただし、分離されたスコープでは、コントローラーの対応する値を更新できません。特定の値ではなく、親のプロパティを更新しようとするため、使用{maskValue: "="}は機能しません。maskValue使用するとうまくいくと思います{ssn: "="}が、コントローラーの特定のプロパティをディレクティブ属性として設定するのではなく、ディレクティブを柔軟にしないように更新する必要があります。どうやら使用$parentも推奨されていません。

分離されたスコープ ディレクティブ内のコントローラーのプロパティに動的にアクセスするにはどうすればよいですか?

編集:ng-model=ssnフォーカス/ぼかしイベント中mask-valueに入力の実際の値が変更されるため、入力でなどを使用できません。たとえば、になるかもしれませんが*****####、実際の値を#########どこかに保存する必要があり、コントローラーは後で他の理由で使用するため、コントローラーは適切な場所のようです。

4

3 に答える 3

1

質問に対する回答はすでに得ていることは承知していますが、何らかの検証を行っているように見えるので、Angular の組み込み機能を使用してそれを行うことができ、引き続き を使用できることに言及する価値があると思いますng-model。次に例を示します。

app.directive("maskValue", function ($parse) {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ngModel) {
      if (!ngModel) return;
      var validator = $parse(attrs.validator)(scope);

      ngModel.$render = function() {
        var hasFocus = document.activeElement == element[0];
        if (ngModel.$valid || hasFocus) element.val(ngModel.$modelValue)
        else element.val('#######');
      };

      element.bind('blur', function() {
        ngModel.$setValidity('maskValue', validator(this.value))
        ngModel.$render();
      });

      element.bind('focus', function() {
        ngModel.$render();
      });
    }
  };
});

このディレクティブは、ビューの更新方法を制御するためにNgModelControllerを使用します。ng-modelこの不自然な例では、要素がフォーカスを失い、検証関数が false を返すと、単純に ######## をレンダリングします。しかし、コントロールが再びフォーカスされると、ユーザーが変更できるように実際の値がレンダリングされます。要素の状態 (有効または無効) に応じてビューが変化する間、コントロールにバインドされたスコープのプロパティは変更されないことに注意してください。ここで実例を見ることができます。

于 2013-09-26T15:46:13.653 に答える
0

申し訳ありませんが、そうしないのはなぜですか：

app = angular.module("foo", []);

app.controller("Ctrl", ['$scope', function ($scope) {
    $scope.ssn = "";
    $scope.validate = function () { console.log($scope.ssn); };
}]);

app.directive("maskValue", function () {
    return {
        link: function (scope, element, attrs) {
            element.bind("change", function () {  
                scope.validate();
            });
        },
    };
});

そしてそのようなHTML：

<div ng-app=foo>
    <div ng-controller=Ctrl>
        <input ng-model="ssn" mask-value />
    </div>
</div>
于 2013-09-26T14:38:35.130 に答える