Actualizando elemento HTML fuera de ng-view
Tengo el siguiente HTML en una 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>
El div "main" es reemplazado por plantillas HTML por mis rutas, sin embargo, me gustaría actualizar la sección del encabezado con un recuento de la cesta de la compra.
He intentado el enlace de modelos como se muestra en el HTML y a continuación:
function DetailController($scope, item, basketDetail) {
$scope.item = item;
$scope.item.basketCount = basketDetail.getCount();
//more code
}
También he intentado simplemente inyectar el servicio y llamarlo desde el HTML. Ambas formas no hacen nada.
¿Puede alguien ayudar, por favor?
Gracias