无法将模型绑定到模板

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

"speaker cards" 模板比这复杂一点，但您应该明白了。

<!-- 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

当 Angular Ctrl 先运行时，您是否在定义变量 $scope.speakers？

如果你只在后期定义speakers 例如：当函数updateSpeakersList returns 有数据时，Angular 可能没有配置 speakers 和它可能没有观察者（由于依赖注入在 AngularJs 中的工作方式）。

当angular controller first 运行（配置时）添加如下行

$scope.speakers = [];

Answer 2

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

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

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

无法将模型绑定到模板

Unable to bind model to template

javascript

angularjs

angularjs-directive

angularjs-templates