1

スピーカーの繰り返しリストのレンダリングを処理するディレクティブを作成しようとしています。ここでの最終目標は、モーダルで行われた更新をページに自動的に反映させることです。

ここで見られる問題は、speakersオブジェクトがテンプレートに組み込まれていないように見えることです。

これは、入力する関数ですspeakers。モーダルの約束で呼び出されます。 オブジェクトspeakersのコレクションです。speakerデータは期待どおりに返されます。

$scope.updateSpeakersList = function () {
    factory.callGetService("GetSpeakers?eventId=" + $scope.event.eventId)
        .then(function (response) {
            var fullResult = angular.fromJson(response);
            var serviceResponse = JSON.parse(fullResult.data);

            $scope.speakers = serviceResponse.Content;

            if ($scope.speakers === null) {
                $scope.hasSpeakers = false;
            } else {
                $scope.hasSpeakers = ($scope.speakers.length > 0);
            }

            LogErrors(serviceResponse.Errors);
        },
        function (data) {
            console.log("Unknown error occurred calling GetSpeakers");
            console.log(data);
        });
}

// other code... then this

modalInstance.result.then(function (savedSpeaker) {
    console.log("BEGIN modalInstance.result");
    $scope.savedSpeaker = savedSpeaker;
    console.log("$scope.savedSpeaker = " + $scope.savedSpeaker);

    $scope.updateSpeakersList();
    console.log("END modalInstance.result");
}, function () {
    console.log("Modal dismissed at: " + new Date());
});

HTMLはこんな感じ。

<div class="container" ng-show="hasSpeakers">
    <div class="row">
        <speaker-cards data="speakers"></speaker-cards>
    </div>
</div>

ディレクティブは非常に単純です。

.directive("speakerCards", function() {
    return {
        restrict: "E",
        templateUrl: "/Apps/Event/Templates/_default/speaker-cards.html",
        scope: {
            data: "="
        }
    };
});

「スピーカー カード」テンプレートはこれよりも少し複雑ですが、要点は理解できるはずです。

<!-- BEGIN speaker cards -->
<div ng-repeat="speaker in speakers | orderBy: 'SpeakerName'">
    <div class="clearfix" ng-if="$index % 3 == 0"></div>
    <div class="col-sm-4">
        <div class="card">
            <span class="speaker-name">{{speaker.SpeakerName}}</span><br/>
            <span class="speaker-title">{{speaker.CompanyTitle}}</span><br/>
            <span class="speaker-company">{{speaker.CompanyName}}</span>
        </div>
    </div>
</div>
<!-- END speaker cards -->

スピーカーが表示されないことに加えて、それがテンプレートに組み込まれていないと思う理由speakersは、結果のマークアップが次のようになるためです。

ここに画像の説明を入力

4

2 に答える 2

5

コードの問題は、カスタム ディレクティブのスコープ定義にあります。

scope: {
        data: "="
       }

これによりdata、ディレクティブのような属性が検索され、このディレクティブ用に作成された分離スコープのプロパティに<speaker-cards data='speakers'>割り当てられます。data

speakersしかし、あなたはあなたのテンプレートで探しています。

<div ng-repeat="speaker in speakers | orderBy: 'SpeakerName'">

しかしspeakers、現在のディレクティブ スコープには何も定義されておらずdata、プロパティしかないため、以下のようにテンプレートを変更することで修正できます。

<div ng-repeat="speaker in data | orderBy: 'SpeakerName'">

dataディレクティブ スコープのようにディレクティブから属性をキャプチャするようにスコープ定義を変更することで、これを修正することもできますspeakers。

myApp.directive("speakerCards", function() {
    return {
        restrict: "E",
        templateUrl: "template.html",
      scope: {
            speakers: "=data"
        }
    };
});

これにより、テンプレートを変更する必要はありません。これを説明するためのペンのサンプルを次に示します。

于 2015-10-16T06:32:47.327 に答える
1

$scope.speakersAngular Ctrl が最初に実行されたときに変数を定義していますか?

後の段階でのみ定義するspeakers場合、たとえば、関数updateSpeakersListがデータを返すときに、Angular が構成speakersされておらず、ウォッチャーが含まれていない可能性があります (AngularJs で依存性注入がどのように機能するかによる)。

angularコントローラーの最初の実行時（構成時）に次の行を追加します

$scope.speakers = [];
于 2015-10-16T06:32:35.117 に答える