Не удается отправить данные от контроллера к компоненту

У меня возникла ситуация, когда я хотел бы настроить компонент в 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 -блоков.

источник

2017-02-17 Jari

Использование 'GameID: '<' ', а также использование' <балльно-информация об игре-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

Не удается отправить данные от контроллера к компоненту

ответ

Смежные вопросы