0

次のようなディレクティブがあります。

return {
                restrict: 'A',
                replace: true,
                scope: {
                    personId: '@',
                    relationshipId: '@',
                    relationshipColumnsShown: '@',
                    personColumnsShown: '@'
                },
                templateUrl: 'app/views/communication/displayList.html',
                controller: controller,
                require: ['$scope', 'communicationLogDataService']
            };

上記のディレクティブをこのように使用している親ディレクティブで設定している personId というプロパティがあることがわかります

<div data-display-communication-log="" data-personId="currentPerson.Id" data-relationship-Columns-Shown="true" data-person-Columns-Shown="false">
</div>

personId が親ディレクティブから currentPerson.Id プロパティに設定されていることがわかります。子ディレクティブで、personId 値にウォッチを設定しました。このウォッチは、子ディレクティブが最初にロードされ、値が未定義のときに 1 回だけヒットします。最初に読み込まれたとき、親の currentPerson は非同期で読み込まれるため、まだ存在しません。親で（これが問題の原因であるかどうかはわかりません）。

私の質問は、 currentPerson の Id を親から子の personId に渡すにはどうすればよいですか?

4

1 に答える 1

1

分離スコープに @ バインディングを使用すると、属性の文字列値のみが得られ、式として評価されません。Fiddle を機能させるために、いくつかの変更を加えました。ng-app を追加する必要があり、ディレクティブの属性名を変更し (キャメル ケースは属性名のテンプレートでは機能しません)、評価されるように式の周りに二重のカーリーを配置します。入力要素も追加して、データが更新されるのを確認できるようにしました。この状況では監視は必要ありません。結果は次のとおりです。

http://jsfiddle.net/pkqUn/3/

<div ng-app="myApp" ng-controller="myCtrl">  
    <input ng-model="currentLog.RelationshipId"></input>
      <div>
          *<div data-personselect="" data-relationship-id="{{ currentLog.RelationshipId }}"></div>*
      </div>
</div>

var myApp = angular.module('myApp',[]);

myApp.directive('personselect', function() {
    return {
        template: '<span> test {{ relationshipId }}<span>',
            restrict: 'A',
            replace: true,
            scope: {
                relationshipId: '@'
            }
        };
});

function myCtrl($scope){
    $scope.currentLog = {};
    $scope.currentLog.RelationshipId = 123;
}

これにより、ディレクティブが親スコープを変更できなくなりますが、「@」の代わりに「=」分離スコープバインディングを使用する方が明確になると思います。属性値の周りにカーリーは必要ありません。

于 2013-09-24T19:54:44.077 に答える