14

最近、ng-disabled と、分離スコープを使用して ng-disabled が行っているのと同じように式を評価するカスタム ディレクティブの両方で Input 要素を動作させる必要があります。カスタム ディレクティブは正常に動作しますが、ng-disabled は動作しません。分離されたスコープ内の式のみを評価します。

カスタム ディレクティブは次のように非常に単純です。

angular
  .module('directives', [])
  .directive('conditionalAutofocus', function () {
    return {
        restrict:'A',
        scope:{
            condition:'&conditionalAutofocus'
        },
        link:function (scope, element, attrs) {
            if (scope.condition()) {
                attrs.$set('autofocus','true');
            }
        }
    }
});

ページは次のようになります。

<input name="pin"
       ng-model="pin"
       type="password"
       required
       ng-disabled="names == null"
       conditional-autofocus="names != null" />

誰かがすでにこの問題の解決策を持っていますか?

前もって感謝します！ヤニ

4

5 に答える 5

4

最近、同様の問題がありました。ng-disabled分離スコープのボタンを無効にして、この素敵な角度ディレクティブを使用したかったのです。掘り下げた後、次のような解決策にたどり着きました：

link: function($scope, element, attrs){

    $scope.$parent.$watch(attrs.ngDisabled, function(newVal){
        element.prop('disabled', newVal);
    });

    //...
}

ジャンプするだけでng-diabledなく式を評価すると、すべての変数が使用可能になります。残念ながら、無効なプロパティを手動で設定する必要があります。$scope$scope.$parent

于 2013-04-15T08:22:03.220 に答える
2

OK、上記の私自身の場合、私の解決策は、ディレクティブの実装を変更することであり、分離されたスコープを使用することはもうありません。

angular.module('directives', [])
.directive('conditionalAutofocus', function () {
    return {
        restrict:'A',
        link:function (scope, element, attrs) {
            scope.$watch(attrs.conditionalAutofocus, function(){
                if (scope.$eval(attrs.conditionalAutofocus)) {
                    element.focus();
                }else{
                    element.blur();
                }
            });
        }
    }
});
于 2012-12-26T03:08:32.097 に答える
1

分離スコープ定義で、親スコープへの双方向バインディングを設定できます。次に、分離スコープ プロパティにウォッチを追加します。これは、ngReadonly ディレクティブのコードを複製するだけです。

angular.module('directives', [])
.directive('conditionalAutofocus', function () {
    return {
        restrict:'A',
        scope:{
            condition: '&conditionalAutofocus',
            isReadonly: '=ngReadonly'
        },
        link:function (scope, element, attrs) {
            if (scope.condition()) {
                attrs.$set('autofocus','true');
            }

            scope.$watch('isReadonly', (value) => {
                attrs.$set('readonly', !!value);
            });
        }
    }
});
于 2013-05-14T19:59:38.363 に答える