如何设置ng禁用的内部指令

时间:2022-08-22 17:13:37

My directive has

我的指令

link: function ($scope, $elm, $attrs) {
    var status = $scope.item.status
    if (status) {
        var statusName = status.name,
            item = $scope.item;
        if (statusName === 'USED') {
            $attrs.$set('ng-disabled', true); // this doesn't work
        } else {
            $elm.attr('ng-disabled', false);
        }
    }
}

So, my question is:

所以,我的问题是:

How to apply ng-disabled to element with this directive?

如何应用ng禁用元素与此指令?

3 个解决方案

#1


13  

You would set ng-disabled to a scope variable, ex:

您将把ng禁用设置为范围变量,例如:

<input ng-disabled="isDisabled" />

And then inside your directive you can set that variable:

然后在你的指令中你可以设置这个变量:

$scope.isDisabled = true;

#2


13  

if (statusName === 'USED') {
    $attrs.$set('disabled', 'disabled');
} else {
    $elm.removeAttr('disabled');
}

Why invoke ng-disable at all? You're already once evaluating the condition yourself, so having ng-disable evaluating it again is redundant.

为什么要调用ng-disable ?你已经自己评估了一次条件,所以让ng-disable评估再次评估是多余的。

#3


4  

//html
<div ng-app="miniapp" ng-controller="MainCtrl">
    <input type="submit" mydir>
</div>
//js
'use strict';
            var app = angular.module('miniapp', []);
            app.directive('mydir', function ($compile) {
                return {
                    priority:1001, // compiles first
                    terminal:true, // prevent lower priority directives to compile after it
                    compile: function(el) {
                        el.removeAttr('mydir'); // necessary to avoid infinite compile loop
                        return function(scope){
                            var status = scope.item.status
                            if (status === 'USED') {
                                el.attr('ng-disabled',true);
                            } else {
                                el.attr('ng-disabled',false);
                            }
                            var fn = $compile(el);
                            fn(scope);
                        };
                    }


                };
            });
            app.controller('MainCtrl', function ($scope) {
                $scope.item = {};
                $scope.item.status = 'USED';
            });

credit to Ilan Frumer

信贷伊兰弗拉姆

#1


13  

You would set ng-disabled to a scope variable, ex:

您将把ng禁用设置为范围变量,例如:

<input ng-disabled="isDisabled" />

And then inside your directive you can set that variable:

然后在你的指令中你可以设置这个变量:

$scope.isDisabled = true;

#2


13  

if (statusName === 'USED') {
    $attrs.$set('disabled', 'disabled');
} else {
    $elm.removeAttr('disabled');
}

Why invoke ng-disable at all? You're already once evaluating the condition yourself, so having ng-disable evaluating it again is redundant.

为什么要调用ng-disable ?你已经自己评估了一次条件,所以让ng-disable评估再次评估是多余的。

#3


4  

//html
<div ng-app="miniapp" ng-controller="MainCtrl">
    <input type="submit" mydir>
</div>
//js
'use strict';
            var app = angular.module('miniapp', []);
            app.directive('mydir', function ($compile) {
                return {
                    priority:1001, // compiles first
                    terminal:true, // prevent lower priority directives to compile after it
                    compile: function(el) {
                        el.removeAttr('mydir'); // necessary to avoid infinite compile loop
                        return function(scope){
                            var status = scope.item.status
                            if (status === 'USED') {
                                el.attr('ng-disabled',true);
                            } else {
                                el.attr('ng-disabled',false);
                            }
                            var fn = $compile(el);
                            fn(scope);
                        };
                    }


                };
            });
            app.controller('MainCtrl', function ($scope) {
                $scope.item = {};
                $scope.item.status = 'USED';
            });

credit to Ilan Frumer

信贷伊兰弗拉姆