2017-02-17 6 views
0

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 블록을 포함시킬 수 있어야하므로 저에게 맞지 않습니다.

+0

사용'게임 ID가된다 : '<','사용'<스코어 정보를 게임-ID = "{{GAME_ID}}">'. 명명 규칙을 존중하는 것이 중요합니다. –

+0

명명 규칙을 수정해도 작동하지 않습니다. 그게 문제가 아닌 것 같습니다. – Jari

+0

문제의 적어도 한 부분입니다. 이 문제를 재현 한 단순한 기둥을 게시하십시오. –

답변

0

나는 스스로에게 대답 할 것입니다. 대답은 JB Nizet이 코멘트로 제공했습니다.

첫 번째 문제는 관련이 있습니다. <score-info game-id="game_id">

마지막으로, 구성 요소 컨트롤러에서 수행 할 필요가 : 코드는 angular.js '명명 규칙을 고수하고 gameId: '<'을 사용하고 중괄호가없는 요소에 참조가 있어야합니다 바인딩 또한 <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; 
      }) 
     }