Adding ngDisabled inside directive

Question

I'm trying to "overload" all inputs in my application. And in doing so, I'd also like to have ngDisabled used based upon a flag in the directive's scope.

Here's what I got and where I'm stuck is getting the ng-disabled to work on the element. I'm guessing I need to re-compile the element or something after I modify it? I'm also calling the directive by using the object notation:

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);
        }
    }
};

What I'm seeing is... nothing is disabled even though I set isDisabled to true in the scope. What am I missing?

Update 1

Ok, so maybe I do need to clarify it a bit. When a user interacts with an input of some kind, I currently have a message being sent back to the server and then sent out to all the other connected clients. This way the user's view changes based upon another user's interactions.

To take advantage of Angular better, I was thinking of trying to use the angular ngDisabled directive. When a user focuses an element, other users would see the element get disabled.

I currently keep track of a 'global' UI state on the server and send this JSON object out to the clients which then update themselves. So I was hoping to have elements get disabled (or other CSS classes) based upon a scope flag (Or other behavior). Something like $scope.fieldsDisabled[fieldName] and set it to true/false.

Maybe I'm thinking about it wrong by going the directive way.

This making any sense? haha

Answer 1

In the directive life cycle template function gets called before compile so ideally it should work fine because you are setting the attribute inside template function. Can you try changing the attribute inside the compile function. Something like this.

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);
        }
    }
};