Question

我在无线电元素上设置了一个基本的布尔绑定。当用户选择“true”无线电元素时，它应该在其下方显示一个div，并带有一些其他选项。加载视图时，我想确保所有“true”元素都显示下方的div。

在Angular之前，我只想用jQuery做两件事：

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

使用Angular，我需要一个指令来做到这一点。该指令正是我想要它做的，但它破坏了与元素的数据绑定，因此如果模型设置为true / false，则不再检查该元素。

如何让数据绑定再次起作用，以便检查“真实”无线电，并显示div？
有关改进此指令/代码的任何建议吗？ Angular新手在这里，但到目前为止还喜欢这个框架！

这是一个表明它的小提琴：

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

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

祝你好运！

Answer 2

您要做的事情非常简单，无需编写指令即可完成。

将data-ng-value替换为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";
}

AngularJS自定义指令打破了无线电元素的数据绑定

2 个答案: