使用$ ctrl的Angular 1.5組件雙向綁定不起作用

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，然后看看效果如何。 順便說一句，您下次是否可以創建一個插件，因為僅憑眼睛很難查看大量代碼。

使用$ ctrl的Angular 1.5組件雙向綁定不起作用

問題描述

1 個解決方案

解決方案1
0 2017-01-20 22:04:06

使用$ ctrl的Angular 1.5組件雙向綁定不起作用

問題描述

1 個解決方案

解決方案1 0 2017-01-20 22:04:06

解決方案1
0 2017-01-20 22:04:06