對於多個元素的角度指令

Question

我創建了這個數字格式指令，但是如果我在多個輸入上使用它，它並不適用於所有的輸入，但只有一個適用。 任何想法？

directive('formatUsNumber', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     priority: 100, 
     link: function(scope, element, attrs, ngModel) { 

      scope.formatNumber = function() { 
       var n = element.val(); 
       var dest = n; 
       if (n.length >= 10) { 
        if (/^[A-Za-z\s]+$/.test(n)) { 
         return; 
        } 
        dest = n.replace(/\D/g, ''); 
        if (!isNaN(dest)) { 
         n = dest; 
        } 
        if (n.substr(0, 1) != "1") { 
         n = "1" + n; 
        } 
       } 
       element.val(n); 
       ngModel.$setViewValue(n); 
      }; 
     }, 
    }; 
}); 

模板：

<input type="text" ng-change="formatNumber()" format-us-number ng-model="myModel" /> 

小提琴：http://jsfiddle.net/Lvc0u55v/7479/

Answer 1

我想這是因爲指令的範圍不孤立。 而且我也做了一些改變，希望它workes相同

directive('formatUsNumber', function() { 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    priority: 100, 
      scope: true, 
    link: function(scope, element, attrs, ngModel) { 

     scope.formatNumber = function() { 
      var n = ngModel.$modelValue; 
      if (n.length >= 10) { 
       if (/^[A-Za-z\s]+$/.test(n)) { 
        return; 
       } 
       n = n.replace(/\D/g, ''); 
       if (!isNaN(dest)) { 
        n = dest; 
       } 
       if (n.substr(0, 1) != "1") { 
        n = "1" + n; 
       } 

       ngModel.$setViewValue(n, 'change:directive'); 
      } 
     }; 
    }, 
    }; 
}); 

U可以測試它here

Answer 2

嘗試增加一個孤立的範圍，這樣的事情：

restrict: 'A', 
require: 'ngModel', 
priority: 100, 
scope:{ 
    ngModel:'=' 
},... 

Answer 3

對於這種使用情況下，我認爲更適合的實現了一個自定義過濾器而不是指令。 Building Custom AngularJS Filters 其他替代方案可能包含自定義解析器和/或格式化程序。 AngularJS - Formatters and Parsers