Angular JS屬性指令採取變量

Question

我想拉一個角度JS指令作爲屬性使用的變量。

我們以petFilter爲例。

HTML：

<input type="text" name="catName" pet-filter='cat'> 
<input type="text" name="dogName" pet-filter='dog'> 

所以，如果我輸入 '狡猾' 和 '布朗尼' 到兩個輸入端，我要離開：

Foxy is a cat! 
Brownie is a dog! 

我至今是：

JS：

.directive('petFilter', function(){ 
    return { 
     restrict: 'A', 
     require : 'ngModel', 
     scope : true, 
     link: function($scope, elem, attrs, ctrl){ 
      $scope.$watch(attrs.ngModel, function() { 
       var temp = ctrl.$viewValue; 
       var petType = ????; 
       outputFunction(temp + 'is a ' + petType + '!'); 
      }) 
     } 
    }; 
}) 

我只是卡在如何設置值petType。

Answer 1

對於您的示例，您實際上並不需要$ watch，該值是綁定到作用域上的變量的。值「狗」和貓」位於被傳遞在ATTRS，而你的情況看起來像：

{ 
    petFilter: "cat" 
} 

，或者如果你使用不同的屬性一樣，它看起來像：

{ 
    petType: "dog" 
} 

所以使用它在你的指令，你可以從ATTRS訪問對象，像這樣：

.directive('petFilter', function(){ 
    return { 
     restrict: 'A', 
     require : 'ngModel', 
     scope : true, 
     link: function($scope, elem, attrs, ctrl){ 
      var petType = attrs.petFilter; 

      outputFunction(temp + 'is a ' + petType + '!'); 
     } 
    }; 
}) 

編輯：如果你想觀看基於NG-模型上的範圍屬性指令，你是關閉，你所要做的就是添加$ watch回調的參數。在這個例子中，假設你的投入是這樣的：

<input ng-model="petName" petFilter="cat"> 

那麼你的指令應該是這樣的：

.directive('petFilter', function(){ 
    return { 
     restrict: 'A', 
     require : 'ngModel', 
     scope : true, 
     link: function($scope, elem, attrs){ 
      /** The callback we pass in here is called every time the value of the 
       scope expression, which in this case is "petName", changes. **/ 
      $scope.$watch(attrs.ngModel, function (newValue, oldValue) { 

       /** newValue will be equal to $scope.petName. **/ 
       var temp = newValue; 
       var petType = attrs.petFilter; 
       outputFunction(temp + 'is a ' + petType + '!'); 
      }) 
     } 
    }; 
})