Question

我正在尝试构建一个指令来处理重复的扬声器列表。这里的最终目标是让页面自动反映在模态中进行的更新。

我在这里看到的问题是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正在将其放入模板的原因是因为生成的标记看起来像这样。

Answer 1

代码中的问题在自定义指令的范围定义中。

$scope.speakers = [];

这样，它将在您的指令中查找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

有了这个，您就不必更改模板了。这里有一个示例Pen来说明这一点。

Answer 2

您是在首次运行Angular Ctrl时定义var boost::regex吗？

如果你只在后期定义$scope.speakers，例如：当函数speakers返回数据时，Angular可能没有配置updateSpeakersList并且可能没有观察者（由于如何依赖注入在AngularJs中有效。

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

speakers

无法将模型绑定到模板

2 个答案: