AngularJSディレクティブは内部要素を取得します

debugcn 投稿 Dev

フィーコ

次のディレクティブがあります：

(function() {
    'use strict';

    angular
        .module('myApp')
        .directive('inner', inner);

    function inner () {

        return {
            restrict: 'A',
            scope: false,
            link: linkFunc
        };

        function linkFunc (scope, element, attrs) {

        }
    }
})();

そしてHTML：

<span inner>{{vm.number}}</span>

linkFuncでvm.numberの値にアクセスするにはどうすればよいですか？spanタグの内容から正確に値を取得する必要があります。

ジュソピ

これを行うにはさまざまな方法がありますが、最も一般的な2つの方法は次のとおりです。

ngModel

ng-modelテンプレートでそのように使用できます。

<span inner ng-model="vm.number">{{vm.number}}</span>

ディレクティブでは、ngModelその値を取得できる場所が必要です。

.directive( 'inner', function(){
    return {
        require: 'ngModel',
        link: function($scope, elem, attrs, ngModel){
            var val = ngModel.$modelValue
        }
    }
})

分離スコーププロパティを宣言する

<span inner="vm.number">{{vm.number}}</span>

.directive( 'inner', function(){
    return {
        scope: { inner:'=' } ,
        link: function($scope, elem, attrs){
            var val = $scope.inner
        }
    }
})

あまり一般的ではない方法：

$ parseサービスを使用して値を取得します

テンプレートを再度使用する：

<span inner="vm.number">{{vm.number}}</span>

まず$parse、ディレクティブの定義にサービスを挿入する必要があると仮定しましょう。次に、link関数内で次の操作を行います。

var val = $parse(attrs.inner)

読み取り専用の継承スコープ

ディレクティブのスコープオプションをどのように定義したかによっては、物事が同期しなくなる可能性があるため、これはお勧めしません。

分離（別名分離）スコープはその値を継承せず、ほとんどの場合未定義であるvm.numberため、おそらく未定義の参照エラーをスローしますvm。
継承されたスコープは親スコープから初期値を継承しますが、実行時に発散する可能性があります。
ディレクティブの$scope参照は式に存在するスコープと同じであるため、スコープが同期を維持する唯一のケースはありません。{{vm.number}}

ここでも、これはおそらく最良の選択肢ではないことを強調します。多数の繰り返し要素または多数のバインディングによってパフォーマンスの問題が発生している場合にのみ、これをお勧めします。ディレクティブのスコープオプションの詳細-https：//spin.atomicobject.com/2015/10/14/angular-directive-scope/

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]