Atualizando o elemento HTML fora do ng-view

Question

Jan 30, 2013, 04:59 PM

Atualizando o elemento HTML fora do ng-view

Eu tenho o HTML abaixo em uma página:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myCart">
<head>
    <title>AngularJS Shopping Cart</title>
    <link href="css/jsonstore.css" rel="stylesheet" />
</head>
<body>
    <div id="container">
        <div id="header">
            <h1>The JSON Store</h1>
            <div class="cart-info">
                My Cart (<span class="cart-items">{{item.basketCount}}</span> items)
            </div>
        </div>
        <div id="main" ng-view>
        </div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular-resource.js"></script>
    <script src="js/routing.js"></script>
    <script src="js/dataresource.js"></script>
    <script src="js/basketinfo.js"></script>
    <script src="js/index.js"></script>
    <script src="js/detail.js"></script>
</body>
</html>

O div "main" é substituído por modelos HTML pelas minhas rotas, no entanto, gostaria de atualizar a seção de cabeçalho com uma contagem de carrinho de compras.

Eu tentei vinculá-lo como mostrado no HTML e abaixo:

function DetailController($scope, item, basketDetail) {
    $scope.item = item;
    $scope.item.basketCount = basketDetail.getCount();

    //more code
}

Eu também tentei apenas injetar o serviço e chamá-lo do HTML. Ambas as formas não fazem nada.

Alguém pode ajudar por favor?

obrigado