javascript - AngularJS custom directive breaks data binding on radio element

Question

I have set up a basic boolean binding on a radio element. When a user selects the "true" radio element, it should display a div beneath it with some further options. When the view loads, I'd like to ensure that all elements that are "true" have the div's beneath displayed.

Prior to Angular, I would just two two things with jQuery:

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

With Angular, I needed a directive to do that. The directive does exactly what I want it to do, but it broke the data binding with the element, so the element is no longer checked if the model is set to true/false.

1. How do I get the data binding to work again so that the "true" radio is checked, and the div shows?
2. Any suggestions on improving this directive/code? Angular newbie here, but LOVING the framework so far!

Here's a fiddle that shows it:

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

Here's the code:

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

这里也是菜鸟，但我认为您可能会遇到在角度指令中使用真值或假值的问题。这里的关键是，由于您使用 true 和 false 作为指令值，Angular 会立即将它们评估为 javascript，而不是字符串。查看 ng-true 和 ng-false 指令，如这里的第二个小提琴所示： https ://github.com/angular/angular.js/issues/2220

祝你好运！

Answer 2

您尝试做的事情非常简单，您无需编写指令即可做到这一点。

将data-ng-values替换为values。

用于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";
}