无法将数据从控制器发送到组件

我有我希望在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

无法将数据从控制器发送到组件

回答

相关问题