AngularJS自定義指令中斷無線電元素的數據綁定

我已經在無線電元素上設置了基本的布爾綁定。當用戶選擇「真正的」無線電元件時，它應該在其下方顯示一個div，並帶有其他選項。加載視圖時，我想確保所有「true」元素都顯示下面的div。AngularJS自定義指令中斷無線電元素的數據綁定

此前角，我就只有兩個兩件事情用jQuery：

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

具有角，我需要一個指令來做到這一點。該指令完全符合我希望它執行的操作，但它破壞了與元素的數據綁定，因此如果模型設置爲true/false，則不再檢查該元素。

如何獲取數據綁定以再次工作，以便檢查「真正的」收音機，並顯示div？
關於改進此指令/代碼的任何建議？這裏有角新手，但很喜歡這個框架！

這裏有一個小提琴，顯示它：

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; 
    }

來源

2013-08-23 Nathan Loding

你要做的事很簡單，你可以做到這一點，而無需編寫指令。

將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"; 
}

來源

2013-08-24 07:03:08 AlwaysALearner

我寧願保持'$ scope.transfer'作爲一個布爾值，而不是一個字符串，由於後來的表單提交時會發生什麼。使用該設置，這種情況不起作用（除非我仍然錯過了某些東西）。 –

在這一點上，Angular不會和我的布爾人玩，所以這就是答案。這是一個更新的小提琴供參考：http://jsfiddle.net/nloding/SLpBG/5/ –

Noob這裏也是如此，但我想你可能會遇到在角度指令中使用truthy或falsy值的問題。這裏的關鍵是，因爲您使用true和false作爲指令值，所以它們立即被Angular評爲javascript，而不是字符串。查看第二個小提琴中顯示的ng-true和ng-false指令：https://github.com/angular/angular.js/issues/2220

祝你好運！

來源

2013-08-23 20:47:04 JimTheDev

AngularJS自定義指令中斷無線電元素的數據綁定

回答

相關問題