O problema é que você está utilizando o $rootScope
no html
. O ideal é não utilizar $rootScope
e sim o this
para compartilhar dados com a view
. Você também está usando o push
no array
, portanto não pode acessar sua variável pelo nome, e sim por uma posição. Altere seu controller
para o seguinte:
angular
.module('meumodulo',[])
.controller('MercadoriaCarrinhoController', MercadoriaCarrinhoController);
MercadoriaCarrinhoController.$inject = ['$http'];
function MercadoriaCarrinhoController($http){
var vm = this;
vm.listaDoCarrinho = {};
_iniciar();
function _iniciar() {
var mercadoria = {
id: 'id',
setor: 'setor',
foto: 'foto',
descr: 'descr',
de: de,
por: por,
mercadoria: '0',
quantidade: 0,
total: '5',
boto: -1
}
vm.listaDoCarrinho.mercadoria = mercadoria;
}
}
E a div
no seu html
:
<div class="body" ng-controller="MercadoriaCarrinhoController as vm">
<span>Total dos produtos: {{vm.listaDoCarrinho.mercadoria.total}}</span>
</div>
Se quiser manter a implementação por array
altere sua implementação para o seguinte:
angular
.module('meumodulo',[])
.controller('MercadoriaCarrinhoController', MercadoriaCarrinhoController);
MercadoriaCarrinhoController.$inject = ['$http'];
function MercadoriaCarrinhoController($http){
var vm = this;
vm.listaDoCarrinho = [];
_iniciar();
function _iniciar() {
var mercadoria = {
id: 'id',
setor: 'setor',
foto: 'foto',
descr: 'descr',
de: de,
por: por,
mercadoria: '0',
quantidade: 0,
total: '5',
boto: -1
}
vm.listaDoCarrinho.push(mercadoria);
}
}
E a div
no seu html
:
<div class="body" ng-controller="MercadoriaCarrinhoController as vm">
<span>Total dos produtos: {{vm.listaDoCarrinho[0].total}}</span>
</div>
Utilize o vm
apenas para as variáveis que você necessita que sejam impressas na tela, caso contrário utilize var
.