使用$ ctrl的Angular 1.5组件双向绑定不起作用

Question

I have some products that I need show personalize with a component in my index.html. In the end I need totalize a grand Total of selected products in $scope main controller "planosVoz". But my two-way binding in svaTotal to component controller doesn't work.

Here a print. In red the svaTotal doesn't reflect.

I get this error in javascript console:

"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: Variables names in Brazilian Portuguese. (Sorry my English in this text).

Above a simplified version of PlanosVoz controller:

angular.module('planosVoz').controller('planosVoz', function($scope) {
     $scope.sva = 0;
     $scope.svaTotal = function() {
            return $scope.sva;
     };  ...

Here the sva component

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 */
    }
});

Here 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;
         }
    });     

Here the template 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 a simplified version of the 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>

Answer 1

Are you using 2 different modules? planosVoz and sva . Try using only 1 and see how it goes. Btw, can you create a plunker next time cause it's really hard to go through huge code by eyes only.