無法將數據從控制器發送到組件

我有我希望在html代碼中配置組件的情況。我有以下結構。無法將數據從控制器發送到組件

game.html這是曾擔任URL像example.com/game/7999應該顯示頁面遊戲7999

<!doctype html> 
<html ng-app="myApp"> 
<head> 
<meta charset="utf-8"> 
<base href="/"> 
<title>Providence</title> 
<script src="/js/angular.js"></script> 
<script src="/data-access/data-access.module.js"></script> 
<script src="/data-access/data-access.service.js"></script> 
<script src="/score-info/score-info.module.js"></script> 
<script src="/score-info/score-info.component.js"></script> 
<script src="/js/game.js"></script> 
</head> 
<body> 
    <div ng-controller="myController"> 
     <p> {{ game_id }} </p> 
     <score-info game_id="{{ game_id }}"></score-info> 
    </div> 
</body>

相應game.js，這似乎爲game_id工作正確地顯示出來。我的問題在於我不能注入game_id的組件。這裏的score-info.component.js其中game_id不可見。

angular. 
module('scoreInfo'). 
component('scoreInfo', { 
    templateUrl : '/score-info/score-info.template.html', 
    controller : function ScoreInfoController(dataAccess) { 
     self = this; 
     console.log(self.game_id) // self.game_id == undefined 
     dataAccess.game(self.game_id).then(function(game) { 
      self.game = game; 
     }); 
    }, 
    bindings : { 
     game_id : '<' 
    } 
});

我注意到一些較早的答案建議使用單獨的控制器和組件接線服務。這對我不起作用，因爲我需要能夠在單個頁面中包含不同數量的scoreInfo塊。

來源

2017-02-17 Jari

使用'遊戲ID： '<''，和使用'<得分-信息遊戲-ID = 「{{game_id}}」>'。尊重命名約定至關重要。 –

修復命名約定不起作用。看來，這不是問題。 – Jari

這是問題的至少一部分。發佈一個簡化的plunkr來重現這個問題。 –

我會自己回答這個問題。 JB Nizet在評論中提供了答案。

第一個問題是與命名有關。代碼需要堅持angular.js'命名約定和使用gameId: '<'和使用<score-info game-id="game_id">

而且<結合必須有沒有花括號中的元素參考：<score-info game-id="game_id">

最後，組件控制器需要採取到賬戶打破角度1.5分支和1.6分支之間的變化。見角CHANGELOG。具體地說ScoreInfoController變得

function ScoreInfoController(dataAccess) { 
     self = this; 
     self.$onInit = function() { 
      dataAccess.game(self.game_id).then(function(game) { 
       self.game = game; 
      }) 
     }

來源

2017-02-17 21:24:03 Jari

無法將數據從控制器發送到組件

回答

相關問題