Question

最近我必须使用一个输入元素同时使用ng-disabled和一个自定义指令，它使用隔离范围来评估表达式，就像ng-disabled正在做的那样，不知何故，自定义指令工作正常，但ng-disabled没有' t，因为它只评估孤立范围内的表达。

自定义指令非常简单，如：

angular
  .module('directives', [])
  .directive('conditionalAutofocus', function () {
    return {
        restrict:'A',
        scope:{
            condition:'&conditionalAutofocus'
        },
        link:function (scope, element, attrs) {
            if (scope.condition()) {
                attrs.$set('autofocus','true');
            }
        }
    }
});

页面如下：

<input name="pin"
       ng-model="pin"
       type="password"
       required
       ng-disabled="names == null"
       conditional-autofocus="names != null" />

有人已经解决了这个问题吗？

提前致谢！雅尼

Answer 1

我有同样的问题，也是最简单的解决方案。是使用隔离范围来继承ngDisabled的属性。

angular.module('directives', [])
.directive('conditionalAutofocus', function () {
    return {
        restrict:'A',
        scope:{
            condition:'&conditionalAutofocus',
            disabled:'=ngDisabled'
        },
        link:function (scope, element, attrs) {
            if (scope.condition()) {
                attrs.$set('autofocus','true');
            }
            if(scope.disabled){
                //is disabled
            }
        }
    }
});

可能只适用于限制：'E'。没有测试过其他人

Answer 2

我最近遇到了类似的问题。我想禁用隔离范围内的按钮并使用这个很好的角度ng-disabled指令。经过一番挖掘后，我找到了这样的解决方案：

link: function($scope, element, attrs){

    $scope.$parent.$watch(attrs.ngDisabled, function(newVal){
        element.prop('disabled', newVal);
    });

    //...
}

要评估ng-diabled表达式而不是$scope，只需跳转到$scope.$parent，您的所有变量都将可用。不幸的是，需要手动设置禁用的属性。

Answer 3

好的，对于我自己的情况，我的解决方案是更改指令的实现，而不再使用隔离范围：

angular.module('directives', [])
.directive('conditionalAutofocus', function () {
    return {
        restrict:'A',
        link:function (scope, element, attrs) {
            scope.$watch(attrs.conditionalAutofocus, function(){
                if (scope.$eval(attrs.conditionalAutofocus)) {
                    element.focus();
                }else{
                    element.blur();
                }
            });
        }
    }
});

Answer 4

您可以在隔离范围定义中设置与父范围的双向绑定。然后在隔离的scope属性上添加一个监视。这只是重复了ngReadonly指令中的代码。

angular.module('directives', [])
.directive('conditionalAutofocus', function () {
    return {
        restrict:'A',
        scope:{
            condition: '&conditionalAutofocus',
            isReadonly: '=ngReadonly'
        },
        link:function (scope, element, attrs) {
            if (scope.condition()) {
                attrs.$set('autofocus','true');
            }

            scope.$watch('isReadonly', (value) => {
                attrs.$set('readonly', !!value);
            });
        }
    }
});

Answer 5

您不需要其他答案的任何复杂性。问题是你的指令甚至不知道wtf ng-Disabled是什么。如果要在模板中使用ng-Disabled，则必须将其注入范围或要求。例如，不会工作：

.directive('myDirective', function () {
    return {
        restrict: 'E',
        template: '<input type="text" ng-disabled="fieldDisabled" />',
        scope:{ something: '=' },
        link: function (scope, element, attrs) {
            scope.something = attrs.something;
        },
        controller: function($scope) {
            $scope.fieldDisabled = false;
            $scope.myAction = function() {
                $scope.fieldDisabled = true;
            };
        }
    }
});

但以下将工作：

.directive('myDirective', function () {
    return {
        restrict: 'E',
        template: '<input type="text" ng-disabled="fieldDisabled" />',
        scope:{ something: '=', lol: '=ngDisabled' },
        link: function (scope, element, attrs) {
            scope.something = attrs.something;
        },
        controller: function($scope) {
            $scope.fieldDisabled = false;
            $scope.myAction = function() {
                $scope.fieldDisabled = true;
            };
        }
    }
});

请注意，唯一的更改是lol: '=ngDisabled'。这使它工作，因为现在你的指令知道ngDisabled是什么。您不必使用lol或进行任何其他特殊布线。您可以像使用自己的变量的任何其他控制器一样使用控制器。

如何让ng-disabled指令适用于隔离范围

5 个答案: