無法將模型綁定到模板

我正在嘗試構建指令來處理重複的發言者列表的呈現。這裏的最終目標是使頁面自動反映在模式中進行的更新。無法將模型綁定到模板

我在這裏看到的問題是，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

無法將模型綁定到模板

回答

相關問題