Угловой атрибут JS Директива, принимающая переменную

Question

Я пытаюсь вытащить переменную для угловой директивы JS, используемой в качестве атрибута.

В качестве примера воспользуемся petFilter.

HTML:

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

Так что, если я введу 'Foxy' и 'Домовой' в два входа, я выберусь:

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 + '!'); 
     } 
    }; 
}) 

EDIT: Если вы хотите смотреть атрибут на сферу на основе нг-модели директива, вы e close, все, что вам нужно сделать, это добавить аргументы для обратного вызова $ 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 + '!'); 
      }) 
     } 
    }; 
})