Question

我有情况我想在html代码中配置组件。我有以下结构。

game.html在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块。

Answer 1

我自己会回答这个问题。答案由JB Nizet在评论中提供。

第一个问题是命名相关。代码需要坚持使用angular.js＆＃39;命名约定并使用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;
            })
        }

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

1 个答案: