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.speakers您是否在 Angular Ctrl 首次运行时定义您的 var ？

如果您只speakers在稍后阶段定义，例如：当函数updateSpeakersList返回数据时，Angular 可能没有配置speakers并且可能没有观察者（由于依赖注入在 AngularJs 中的工作方式）。

在角度控制器首次运行时添加以下行（配置时）

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