在指令

Question

我试图超载＆＃34;我的申请中的所有输入。在这样做的过程中，我也希望根据指令范围内的标志使用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

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

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

我目前正在追踪一个全球性的＆＃39;服务器上的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);
        }
    }
};