Значение, не связанное с угловым настраиваемым компонентом переключателя

Question

Я создал пользовательский компонент переключателя в угловых js, который будет использоваться в моем приложении. следующий код, который я написал для компонента.

JS

angular.module("customComponent") 
    .component("ngRadiobutton", { 
     template:   
      '<label class="ng-control-radio-button">' + 
      ' <span data-ng-bind="$ctrl.label"></span>' + 
      ' <input type="radio" name="{{$ctrl.group}}" data-ng-model="$ctrl.checked"/>' + 
      ' <div class="ng-control-indicator-radio"></div>' + 
      '</label>' + 
      '',  

     bindings: { 
      label: '=?', 
      checked: '=', 
      group: '@' 
     }, 
     controller: function() { 
      var $ctrl = this; 
      console.log($ctrl.checked); // Data is binding properly at this stage 
     } 
    }); 

HTML

<div data-ng-repeat="radio in vm.radioValues"> 
     <ng-radiobutton label="radio.label " group="group1 " checked="radio.checked"></ng-radiobutton> 
    </div> 

JSON

vm.radioValues = [{ label: 'Value1', checked: true }, 
     { label: 'Value2', checked:false } 
    ]; 

Проблема я столкнулся в том, что true и false Значение, которое я устанавливаю, не получает связывание с компонентом. по умолчанию оба переключателя не отмечены. Может ли кто-нибудь сказать мне, что не так с моим кодом.

Заранее спасибо

Answer 1

Похоже, вы пытаетесь иметь поведение флажка кнопки радио. (Это на самом деле не проблема связывания)

Вот действительная версия того, что вы можете иметь:

angular.module("customComponent", []) 
 
    .component("ngRadiobutton", { 
 
     template:   
 
      '<label class="ng-control-radio-button">' + 
 
      ' <span data-ng-bind="$ctrl.label"></span>' + 
 
      ' <input type="radio" name="{{$ctrl.group}}" data-ng-model="$ctrl.checked" value="{{$ctrl.label}}" />' + 
 
      ' <div class="ng-control-indicator-radio"></div>' + 
 
      '</label>' + 
 
      '',  
 

 
     bindings: { 
 
      label: '=?', 
 
      checked: '=', 
 
      group: '@' 
 
     }, 
 
     controller: function() { 
 
      var $ctrl = this; 
 
      console.log($ctrl.checked); // Data is binding properly at this stage 
 
     } 
 
    }); 
 

 
angular.module("customComponent").controller('Ctrl', function($scope) { 
 
    $scope.group = {value: 'Value2' }; 
 
    
 
    $scope.radioValues = [ 
 
     { label: 'Value1' }, 
 
     { label: 'Value2' } 
 
    ]; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 

 
<div ng-app="customComponent"> 
 
    <div ng-controller="Ctrl"> 
 
    <div data-ng-repeat="radio in radioValues"> 
 
     <ng-radiobutton label="radio.label" group="group1" checked="group.value"></ng-radiobutton> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Это потому, что логические значения в JavaScript передаются по значению, а не по ссылке. Чтобы решить эту проблему, просто передать объект вместо чистого логического значения:

<ng-radiobutton label="radio.label " group="group1 " checked="radio"></ng-radiobutton> 

и ваш компонент шаблон:

<input type="radio" name="{{$ctrl.group}}" data-ng-model="$ctrl.checked.checked"/>' +