angular-styleguide
angular-styleguide copied to clipboard
How to define common directives in controllerAs syntax, which will be independent of controller and can be used in any controller?
I want to create a directive, which will give me the file name and file type when it's picked in html's input file tag. I am using change
event of input tag.
In $scope
controller design we can do like given below and I can use it in any controller and file data will be available in $scope.file
app.directive('file', function() {
return {
restrict: 'AE',
scope: true,
link: function(scope, el, attrs){
el.bind('change', function(event){
var files = event.target.files;
var file = files[0];
scope.file = file;
scope.$apply();
});
}
};
});
In controllerAs syntax I have to pass controller
property which will restrict me to use in that controller. To use in all the controllers I have to create duplicate directives only with different controller name.
app.directive('file', function() {
return {
controller: MyController, // I don't want to use in single controller, I want it to be usable in all controllers
restrict: 'AE',
controllerAs: 'vm',
link: function(scope, el, attrs, vm){
el.bind('change', function(event){
var files = event.target.files;
var file = files[0];
vm.file = file;
});
}
};
});
So how can I achieve it?
@joshstar you mean to say it's not possible to define common controllers. Either I have to use $scope
or have to go for duplicate directives each for controllers.