Question

我有一些产品需要使用index.html中的组件进行个性化设置。最后，我需要在$ scope主控制器“planosVoz”中累计所选产品的总数。但是我在 svaTotal 中与组件控制器的双向绑定不起作用。

这是一个印刷品。红色的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>

Answer 1

您使用的是2个不同的模块吗？ planosVoz和sva。尝试只使用1，看看它是怎么回事。顺便说一下，下次你能不能创造一个吸食者，因为只有眼睛才能通过巨大的代码。

Angular 1.5组件双向绑定使用$ ctrl不能正常工作

1 个答案: