Пользовательская директива AngularJS обрывает привязку данных к элементу радиосвязи

Question

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

До Угловое, я бы только две две вещи с JQuery:

// pseudo-ish code 
$(element).on("click", function() { /* show/hide div */ }); 
$(element:checked).each(function() { /* show child div if val() == 'true' */} 

С Угловое, мне нужна директива, чтобы сделать это. Директива делает именно то, что я хочу сделать, но она сломала привязку данных к элементу, поэтому элемент больше не проверяется, если для модели установлено значение true/false.

1. Как получить привязку данных к работе снова, чтобы проверить истинное радио, а div показывает?
2. Любые предложения по улучшению этой директивы/кода? Угловой новичок здесь, но ЛЮБОВЬ рамки до сих пор!

Вот скрипка, которая показывает, что:

http://jsfiddle.net/nloding/SLpBG/

Вот код:

HTML:

<div ng-app="myApp" ng-controller="testController"> 
    <input type="radio" name="TransferControl" data-test-control required data-ng-value="true" data-ng-model="transfer" /> TRUE<br/> 
    <input type="radio" name="TransferControl" data-test-control data-ng-value="false" data-ng-model="transfer" /> FALSE 

    <div class="testcontrols">SHOW SOME STUFF HERE IF TRUE</div> 
</div> 

JS:

var myApp = angular.module('myApp', []) 
    .directive('testControl', function() { 
     return { 
      require: 'ngModel', 
      restrict: 'A', 
      replace: false, 
      transclude: true, 
      scope: { 
       enabled: "=ngModel" 
      }, 
      link: function (scope, element) { 
       if (scope.enabled && element.val().toLowerCase() === 'true') { 
        element.nextAll('div.testcontrols').first().show(); 
       } 
       element.bind('click', function() { 
        if (element.val().toLowerCase() === 'true') { 
         element.nextAll('div.testcontrols').first().show(); 
        } else { 
         element.nextAll('div.testcontrols').first().hide(); 
        } 
       }); 
       return; 
      } 
     }; 
     }); 

function testController($scope) { 
     $scope.transfer = true; 
    } 

Answer 1

То, что вы пытаетесь сделать, довольно просто, и вы можете сделать это без необходимости писать директиву.

Заменить data-ng-value s с value s.

Используйте ng-show, чтобы скрыть/показать содержимое на основе значения transfer.

<div ng-app="myApp" ng-controller="testController"> 
    <input type="radio" name="TransferControl" ng-model="transfer" 
    value="true"/> TRUE<br/> 
    <input type="radio" name="TransferControl" ng-model="transfer" 
    value="false"/> FALSE 
    <!-- compare against 'true' instead of true --> 
    <div ng-show="transfer=='true'">SHOW SOME STUFF HERE IF TRUE</div> 
</div> 

Контроллер:

function testController($scope) { 
    /* since attribute values in HTML are strings */ 
    /* $scope.transfer = true; wont work */  
    /* use a string instead */ 
    $scope.transfer = "true"; 
} 

Answer 2

Noob здесь, но я думаю, что вы можете столкнуться с проблемой использования правдивых или фальшивых значений в угловой директиве. Ключевым моментом здесь является то, что, поскольку вы используете значения true и false как директивы, они сразу же определяются Angular как javascript, а не как строки. Проверьте директивы ng-true и ng-false, как показано на второй скрипке здесь: https://github.com/angular/angular.js/issues/2220

Удачи!