Question

我正在尝试为一个用作属性的角度JS指令提取变量。

我们以petFilter为例。

HTML：

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

因此，如果我在两个输入中输入'Foxy'和'Brownie'，我就会离开：

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，它用于绑定范围上的变量。值“dog”和cat“位于传入的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-model指令观察范围的属性，那么你就要关闭了，所有你要做的就是添加$ 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 + '!');
            })
        }
    };
})

Angular JS属性指令变量

1 个答案: