Adding internal ngDisabled directive
I am trying to "overload" all inputs in my application. And in doing so, I would also like to use ngDisabled based on a flag in the scope of the directive.
Here's what I got and where I am stuck is getting ng-disabled to work on the element. I am assuming that I need to recompile the item or something after changing it? I also call the directive using 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 see is ... nothing is disabled, although I set isDisabled to true. What am I missing?
Update 1
Ok, so maybe I need to clarify this a bit. When a user interacts with any input, I am currently sending a message to the server and then sent to all other connected clients. Thus, the user look changes based on other user interactions.
To take better advantage of Angular, I was thinking about trying to use Angular's ngDisabled directive. When a user focuses an element, other users will see that the element is disabled.
I am currently monitoring the "global" state of the UI on the server and sending this JSON object to clients who then update themselves. So I was hoping the elements would be disabled (or other CSS classes) based on the scope flag (or other behavior). Something like $scope.fieldsDisabled[fieldName]
and set to true / false.
Perhaps I am thinking about this incorrectly by going in a directive way.
It makes sense? Ha
source to share
In the lifecycle of a directive, the template
function is called before compilation, so ideally it should work fine because you are setting the attribute inside the template function. Can you try changing the attribute inside the compile function. Something like that.
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);
}
}
};
source to share