angularjs - 在指令中添加 ngDisabled

Question

我试图“重载”我应用程序中的所有输入。在这样做的过程中，我还希望根据指令范围内的标志使用 ngDisabled。

这是我得到的，我被卡住的地方是让 ng-disabled 在元素上工作。我猜我需要在修改后重新编译元素或其他东西吗？我还使用对象表示法调用指令:

angular.module("MimosaApp").directive({
    "textarea": appInputs,
    "input": appInputs
});

var appInputs = function($compile, Device) {
    return {
        restrict: 'E',
        require: '?ngModel',
        priority: 101,
        template: function(tElement, tAttrs) {
            tElement.attr("ng-disabled", 'isDisabled');
            return tElement;
        },
        link: function($scope, element, attrs) {
            $compile(element);
            element.on("focus", function() {
                console.log($scope);
            })
        },
        controller: function($scope, $element) {
            $scope.isDisabled = true;
            console.log($scope);
        }
    }
};

我看到的是...即使我在范围内将 isDisabled 设置为 true，也没有禁用任何东西。我错过了什么？

更新1

好的，也许我确实需要澄清一下。当用户与某种输入交互时，我目前有一条消息被发送回服务器，然后发送给所有其他连接的客户端。这样，用户的 View 会根据另一个用户的交互而改变。

为了更好地利用 Angular，我正在考虑尝试使用 angular ngDisabled 指令。当用户聚焦某个元素时，其他用户会看到该元素被禁用。

我目前跟踪服务器上的“全局”UI 状态，并将此 JSON 对象发送到客户端，然后客户端自行更新。所以我希望根据范围标志(或其他行为)禁用元素(或其他 CSS 类)。类似于 $scope.fieldsDisabled[fieldName] 并将其设置为 true/false。

也许我通过指令方式考虑错误。

这有意义吗？哈哈

Answer 1

在指令生命周期中，template 函数在编译之前被调用，因此理想情况下它应该可以正常工作，因为您是在模板函数中设置属性。您可以尝试更改编译函数中的属性吗？像这样。

var appInputs = function($compile, Device) {
    return {
        restrict: 'E',
        require: '?ngModel',
        priority: 101,
        compile: function(tElement, tAttrs) {
            tElement.attr("ng-disabled", 'isDisabled');

            return function($scope, element, attrs) {
               element.on("focus", function() {
                console.log($scope);
               });
            }
        },
        controller: function($scope, $element) {
            $scope.isDisabled = true;
            console.log($scope);
        }
    }
};