html 코드에서 구성 요소를 구성하고 싶은 상황이 있습니다. 나는 다음과 같은 구조를 가지고있다. game_id
로 제대로 작동 제대로 표시 game.js
을, 해당 게임 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>
페이지를 표시해야하는 example.com/game/7999
같은 URL에로 제공됩니다
game.html
. 나는 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
});
내 문제는 구성 요소에있다. 다음은 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
블록을 포함시킬 수 있어야하므로 저에게 맞지 않습니다.
사용'게임 ID가된다 : '<','사용'<스코어 정보를 게임-ID = "{{GAME_ID}}">'. 명명 규칙을 존중하는 것이 중요합니다. –
명명 규칙을 수정해도 작동하지 않습니다. 그게 문제가 아닌 것 같습니다. – Jari
문제의 적어도 한 부분입니다. 이 문제를 재현 한 단순한 기둥을 게시하십시오. –