0

私はAngular JSが初めてです。私がやろうとしているのは、ディレクティブを使用して再利用可能なコンポーネントを作成することです。現在のところ、ドロップダウンは 1 つだけです。Add を実行している間、ドロップダウンには permissionValues 配列の値が取り込まれ、選択された値を持つ空のモデルとのバインディングが行われます。しかし、編集しようとすると、ドロップダウンが既存のモデル値で初期化されません。ディレクティブ コード。

  directive('userPermissions', function() {
      return {
        restrict: 'E',
        template:'<div><select ng-model="ngModel" ng-options="abc [optValue] as abc [optDescription] for abc in array"></select>{{tab}}</div>',
        replace: true,
        transclude: true,
        scope:{ ngModel: '=', tab:'='},
        link: function (scope, element, attrs) {
            scope.optValue = attrs.optValue;
            scope.optDescription = attrs.optDescription;
            scope.$watch(attrs.array, function(newVal, oldVal){
                 if(newVal != oldVal){
                     scope.array = newVal;
                 }
            });
        }
      };
    });

HTMLコード

                <user-permissions  tab="tab"  
                    ng-model="newUser.canCheckout1" 
                    array="permissionValues" 
                    opt-value="value" 
                    opt-description="label"></user-permissions>

メインコントローラーで

 $scope.permissionValues = [{label:'Standard', value:'true'},{label:'Restricted', value:'false'}];

ご覧のとおり、テスト用に「タブ」を追加しました。[編集] をクリックすると呼び出されるロード機能のタブの値を変更しています。タブの新しい値が出力されていますが、ドロップダウンが初期化されていません。

4

1 に答える 1

0

array次を使用して、コントローラーから属性を双方向バインドしようとしています。

scope: {array: '=' ... }

$scope.array問題は、コントローラーに何もないことです。したがって、何らかの形で 2 つをリンクする必要があります。これを試して：

link: function(scope, element, attrs){
    scope.optValue = attrs.optValue;
    scope.optDescription = attrs.optDescription;
    scope.array = scope.$eval(attrs.array);
}

これは機能しますが、動的バインディングは作成されません。値は一度だけ読み取られ、変更されても更新されませんscope[attrs.array]。そのためには、$watch変更をリッスンする必要があります。

scope.$watch(attrs.array, function(newVal, oldVal){
     if(newVal != oldVal){
         scope.array = newVal;
     }
});

それが役立つことを願っています。

アップデート：

明確にするために、これを行うには複数の方法があるため、どのように行うかはあなた次第です。しかし、ディレクティブでのバインドの背後にある考え方scope: { ... }は、スコープのどのプロパティをバインドするか、およびそれらをどのようにバインドするか (一方向または双方向) を指定しているということです。$scope.arrayコントローラーからディレクティブにプロパティをバインドするようにangularに指示していました。しかし、$scope.arrayプロパティがなかったので、何も拘束されていませんでした。したがって、バインディングを say に変更するか、関数を にscope: {permissionValues: '='}変更することができます。どちらでも動作するはずです。$scope.permissionValuescontroller$scope.array

しかし、使用するプロパティarray="permissionValues"を示すためにディレクティブで属性を使用しようと$scopeしているので、上記で指定した方法でそれを行う必要があると考えました。Usingとは、バインディングをまったく使用scope.$watchする必要がないことを意味します。scope: { ... }この$watch関数はそのバインディングを手動で作成し、そのattrs.array値を使用して、実行時に適切なスコープ パラメーターに動的にバインドできるようにします。を使用scope: {}するには、DOM から読み取られるときではなく、ディレクティブが作成されるときに呼び出されるスコープ プロパティを知っている必要があります。

それはもっと理にかなっていますか？

于 2013-10-22T18:21:42.103 に答える