【发布时间】：2017-07-07 08:04:30
【问题描述】：
我有想在 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 显示正确。
angular.module('myApp', [
'dataAccess',
'scoreInfo' ],
function($locationProvider){
$locationProvider.html5Mode(true);
});
angular.
module('myApp').
controller('myController', function($scope, $location) {
var split_res = $location.path().split('/');
var game_id = split_res[split_res.length-1];
$scope.game_id = 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 -blocks。
【问题讨论】：
-
使用
gameId: '<'，并使用<score-info game-id="{{ game_id }}">。尊重命名约定至关重要。 -
修复命名约定不起作用。看来这不是问题。
-
在使用 angular 1.x 而不是 angular 2.x 之后，修复你的模块名称，删除不存在（和未使用）的 dataAccess 服务注入，并使用 self.game = ... ，一切似乎都按预期工作。 plnkr.co/edit/CkyaRS7epOhhIEJFSTOR?p=preview
-
由于此重大更改：github.com/angular/angular.js/blob/master/…。有关更新的 plunkr，请参阅 plnkr.co/edit/uuaZUIkUWZDg2Mxs5tMT?p=preview。
-
angular 2.0 是一个完全不同的框架。不是你知道的角度的更新。
标签： angularjs angular-controller angular-components