I am struggling with customizing some products using a component in my index.html. Ultimately, I need to calculate the total of selected products within the main controller "planosVoz" using two-way binding on the svaTotal property in the component controller.
Unfortunately, it seems like the two-way binding is not working as expected. The red highlighted section in the image below clearly shows that the svaTotal value is not updating properly. https://i.sstatic.net/avnX0.png
Upon checking the JavaScript console, I encountered the following error:
"Error: [$compile:nonassign] http://errors.angularjs.org/1.6.1/$compile/nonassign?p0=undefined&p1=svaTotal&p2=sva
M/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js:6:425
oa/</u<@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js:85:257
oa/</p@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js:85:334
m/c<@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js:130:87
Hf/this.$get</m.prototype.$digest@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js:145:81
Hf/this.$get</m.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js:148:76
Wc[b]</<.compile/</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js:282:245
r.event.dispatch@https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:3:10263
r.event.add/q.handle@https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:3:8325
"
Note: The variable names are in Brazilian Portuguese (Excuse my English in this text).
Below is a simplified version of the PlanosVoz controller:
angular.module('planosVoz').controller('planosVoz', function($scope) {
$scope.sva = 0;
$scope.svaTotal = function() {
return $scope.sva;
}; ...
The code for the sva component:
angular.module('sva').component('sva', {
templateUrl: 'app/sva/sva.template.html',
controller: 'sva',
bindings: {
titulo: '@',
logoimg: '@',
logoid: '@',
base: '@',
radioname: '@',
svaTotal: '=' /* the two-way binding issue */
}
});
The code for the sva controller:
angular.module('sva').controller('sva', function($scope) {
var self = this ;
self.basePrecos = JSON.parse(
'{'+
'"nuvemJornaleiro": ['+
'{"plano": "Nenhum", "valor":0 }'+
',{"plano": "Semanal", "valor":4.99 }'+
',{"plano": "Mensal", "valor":12.9 }'+
']'+
',"kantoo": ['+
'{"plano": "Nenhum", "valor":0 }'+
',{"plano": "Semanal", "valor":4.99 }'+
',{"plano": "Mensal", "valor":12.9 }'+
']'+
',"vivoMusica": ['+
'{"plano": "Nenhum", "valor":0 }'+
',{"plano": "Mensal", "valor":12.9 }'+
',{"plano": "Mensal 3 em 1", "valor":14.9 }'+
']'+
'}'
);
self.valorAnterior = 0;
self.getBase = function(nomebase) {
return self.basePrecos[nomebase];
};
self.totalizaSva = function(){
self.svaTotal = self.svaTotal - self.valorAnterior;
self.valorAnterior = self.svaSelecao + 0;
self.svaTotal = self.svaTotal + self.svaSelecao;
}
});
The template code for sva.template.html:
<table>
<tr>
<td>
<div class="secao">
<img ng-src="{{$ctrl.logoimg}}" id="{{$ctrl.logoid}}"></img><span class="secaoTitulo"><b>{{$ctrl.titulo}}</b></span>
</div>
<div style="clear:both;"></div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<form style="margin-top: 10px;">
<span ng-repeat="item in $ctrl.getBase($ctrl.base)">
<input type="radio" ng-name="$ctrl.radioname" ng-click="$ctrl.totalizaSva()" ng-model="$ctrl.svaSelecao" ng-value="item.valor"> {{item.plano}} </input>
</span>
</form>
<div style="text-align:center;width:100%" ng-show="$ctrl.svaSelecao">Valor do SVA: R${{$ctrl.svaSelecao}} / SvaTotal:{{$ctrl.svaTotal}}</div>
</td>
</tr>
</table>
Here's a simplified snippet from the index.html:
<!DOCTYPE html>
<html>
<head>
<!-- Other head elements -->
</head>
<body ng-app="simulador" ng-controller="planosVoz" ng-cloack>
<div class="container">
<div class="modulo">
<!-- Your content here -->
</div>
</body>
</html>