无法将模型绑定到模板

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

代码中的问题在于custom指令的作用域定义.

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"
        }
    };
});

有了这个,您不必更改模板.这是一个示例笔来说明这一点.