如何動態應用自定義角度指令？

我正在探索AngularJS中的高級功能，例如自定義指令。我想要一個文本框，通過使用自定義指令應該只允許數字或文本只取決於用戶從下拉框中選擇的值。我設法創建了一個自定義指令，它只允許基於AngularJs Custom Directive fails the text box validation的數字。我不知道如何動態地將自定義指令應用於相同的文本框。我已經創建了另一個自定義指令，它只允許文本，但不知道如何動態地使用純文本指令替換數字指令。如何動態應用自定義角度指令？

<body> 
<div ng-app="TextboxExample" ng-controller="ExampleController"> 
    <form name="shippingForm" novalidate> 
     <select id="textBoxOptions" > 
      <option value="number" selected="selected">Numbers Only</option> 
      <option value="text">Text Only</option> 
      <option value="special">Special Characters</option> 
      <option value="any">Any Value</option> 
     </select> 

     <input id="customTextBox" unbindable number-only-input type="text" name="name" ng-model="testvalue.number" required /> 
     <span class="error" ng-show="shippingForm.name.$error.required"> 
      Please enter a value 
     </span> 
    </form> 
</div> 
<script src="scripts/angular.js"></script> 
<script src="scripts/jquery.min.js"></script> 
<script>  
    $("select").change(function() { 

     var selected = $("#textBoxOptions").val(); 
     $('#customTextBox').attr("ng-model", selected); 
    }); 
</script> 
<script> 

    angular.module('TextboxExample', []) 
    .controller('ExampleController', ['$scope', function ($scope) { 
     $scope.testvalue = { number: 1, validity: true }; 
    }]) 
    .directive('numberOnlyInput', ['$compile', function ($compile) { 
     return { 

      link: function (scope, element, attrs) { 
       var watchMe = attrs["ngModel"]; 
       scope.$watch(watchMe, function (newValue, oldValue) { 
        if (newValue == undefined || newValue == null || newValue == "") { 
         return; 
        } else if (isNaN(newValue)) { 
         var myVal = watchMe.split("."); 
         switch (myVal.length) { 
          case 1: 
           scope[myVal[0]] = oldValue; 
           break; 
          case 2: 
           scope[myVal[0]][myVal[1]] = oldValue; 
         } 
        } 

        $compile(element)(scope); 
       }); 

      } 
     }; 

    }]); 
</script>

當我在下拉框中改變數值，通過檢查元件作爲檢查它正確地改變上customTextBox的NG-模型。但是，我不確定如何創建和應用多個指令。謝謝

來源

2016-04-23 Massey

只需創建該指令爲類，並使用該類有條件地使用ng-class。 :) –

有幾種可能性。您可以切換指令atttibute或全部要素：

<input {{ yourmode ? number-directive : text-directive }} ng-model="data">

或

<input ng-show="yourmode" number-directive ng-model="data"> 
<input ng-show="!yourmode" text-directive ng-model="data">

或更改動態指令模式屬性

<input directive-data="yourmode" my-input-directive ng-model="data">

來源

2016-04-23 21:10:12

西蒙，我喜歡第一種方法。如果我有兩個以上的選擇會怎樣？只說數字，僅限文字和特殊字符？ – Massey

@drifter。那麼爲什麼你不使用一個指令來改變屬性值取決於你的模式？ –

如何動態應用自定義角度指令？

回答

相關問題