【发布时间】：2017-06-05 23:29:37
【问题描述】：
我有一些产品需要在我的 index.html 中显示个性化组件。最后，我需要在 $scope 主控制器“planosVoz”中汇总所选产品的总数。但是我在 svaTotal 到组件控制器的双向绑定不起作用。
我在 javascript 控制台中收到此错误：
"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
"
obs：巴西葡萄牙语中的变量名称。 （对不起，我在本文中的英语）。
PlanosVoz 控制器的简化版本之上：
angular.module('planosVoz').controller('planosVoz', function($scope) {
$scope.sva = 0;
$scope.svaTotal = function() {
return $scope.sva;
}; ...
这里是 sva 组件
angular.module('sva').component('sva', {
templateUrl: 'app/sva/sva.template.html',
controller: 'sva',
bindings: {
titulo: '@',
logoimg: '@',
logoid: '@',
base: '@',
radioname: '@',
svaTotal: '=' /* this two way binding doesn't work */
}
});
这里是 sva 控制器
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;
}
});
这里是模板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>
这里是 index.html 的简化版
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Simulador de Ofertas</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/topo.css">
<link rel="stylesheet" href="css/imagens.css">
<link rel="stylesheet" href="css/modulo.css">
<link rel="stylesheet" href="css/secao.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-resource.min.js"></script>
<script src="app/app.module.js"></script>
<script src="app/core/core.module.js"></script>
<script src="app/planosvoz/planosvoz.module.js"></script>
<script src="app/planosvoz/planosvoz.controller.js"></script>
<script src="app/sva/sva.module.js"></script>
<script src="app/sva/sva.controller.js"></script>
<script src="app/sva/sva.component.js"></script>
</head>
<body ng-app="simulador" ng-controller="planosVoz" ng-cloack>
<div class="container">
<div class="modulo">
<div class="titulomodulo">SVA</div>
<table class="tabelaPrincipal">
<tr>
<td colspan="2">
<sva
titulo="Nuvem do Jornaleiro"
logoimg="img/nuvemjornaleirologo.png"
logoid="nuvemjornaleirologo"
base="nuvemJornaleiro"
radioname="nuvemJornaleiro"
svaTotal="sva"
>
</sva>
</td>
</tr>
<tr>
<td colspan="2">
<sva
titulo="Kantoo"
logoimg="img/kantoologo.png"
logoid="kantoologo"
base="kantoo"
radioname="kantoo"
svaTotal="sva"
>
</sva>
<sva
titulo="Vivo Musica"
logoimg="img/vivomusicalogo.png"
logoid="vivomusicalogo"
base="vivoMusica"
radioname="vivoMusica"
svaTotal="sva"
>
</sva>
</td>
</tr>
<tr>
<td colspan="2">
<div class="secao">
<span class="secaoTitulo"><b>Total de SVA's</b></span>
<hr class="secaoLinha">
</div>
<div style="clear:both;"></div>
<h4 style="text-align:center;">{{svaTotal()}}</h4>
</td>
</tr>
</table>
</div>
</body>
</html>
【问题讨论】：
标签： javascript angularjs angularjs-directive angularjs-components