Угловая 1.5 Компонентная двухсторонняя привязка Не работает с использованием $ ctrl

У меня есть некоторые продукты, которые мне нужно показать персонализировать с помощью компонента в моем index.html. В итоге мне нужно суммировать грандиозное общее количество выбранных продуктов в $ scope main controller «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/</[email protected]://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</[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js:145:81 
Hf/this.$get</[email protected]://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 
[email protected]://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:3:10263 
r.event.add/[email protected]://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:3:8325 
"

набл: имена переменных в бразильском португальском. (Извините, мой английский в этом тексте).

Над упрощенной версии PlanosVoz Контроллер:

angular.module('planosVoz').controller('planosVoz', function($scope) { 
    $scope.sva = 0; 
    $scope.svaTotal = function() { 
      return $scope.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 */ 
    } 
});

Здесь сва контроллер

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>

источник

2017-01-20 Vinicius Sousa

Вы используете 2 различных модулей? planosVoz и sva. Попробуйте использовать только 1 и посмотреть, как это происходит. Кстати, можете ли вы создать плункер в следующий раз, потому что очень сложно пройти через огромный код только глазами.

источник

2017-01-20 22:04:06

№ 'planosVoz' - мой главный контроллер и' sva' - это модуль. –

Извините за огромный код в тексте. Я не знал, как использовать плункер, я исследую это. –

Forgiveme. Это все! Я использую модуль 'planosVoz' и модуль' sva'. Но я хочу разделить логику. Для этого я хочу использовать привязку к mantain-связи между модулями. –

Угловая 1.5 Компонентная двухсторонняя привязка Не работает с использованием $ ctrl

ответ

Смежные вопросы