无法将模型绑定到模板

我正在尝试构建指令来处理重复的发言者列表的呈现。这里的最终目标是使页面自动反映在模式中进行的更新。无法将模型绑定到模板

我在这里看到的问题是，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是使它到模板的原因，是因为所产生的标记看起来是这样的。

来源

2015-10-16 Will Strohl

对于'$ scope'，tellercards指令似乎没有'speaker'属性。将扬声器中的扬声器更改为数据中的扬声器，或将数据属性更改为扬声器：范围：{扬声器：“=数据”}“。看看这是否有所作为。 – Gustav

@Gustav这样一个简单的事情......修复它。我在元素中设定了属性“扬声器”。您应该将其作为答案发布。 :) –

Arkantos的答案基本相同，你应该接受一个。 – Gustav

的问题在你的代码是在您的自定义指令的范围定义。

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来说明这一点。

来源

2015-10-16 06:32:47 Arkantos

你定义你的VAR $scope.speakers当角按Ctrl先运行？

如果你只是在后一阶段如定义speakers：当函数返回updateSpeakersList数据，角可能没有配置speakers和（依赖注入在AngularJs是如何工作的，由于）可能在它没有观察。

添加以下线的时候，角度控制器首先运行（配置时间）

$scope.speakers = [];

来源

2015-10-16 06:32:35 ThiagoPXP

要添加到此，如果您将指令作用域绑定更改为'data：'？=''，则可以将'$ scope.speakers'保留为undefined。 – Artless

无法将模型绑定到模板

回答

相关问题