Is it feasible to create a directive (canUpdate) which will enable me to enable/disable elements of my angular/web api application depending on results from a service that will test users permissions for a given user group or comma separated list of groups maybe.
My thinking is:
<div><button can-update="customerMgmt">Edit customer detail</button></div>
and my directive can perform the call to check this user is part of customerMgmt group and enable/disable appropriately.
However I am struggling to visualize/understand what my directives' template would look like.
If you was to write a directive that would perform this type of operation what would your directives' html template look like, as I'd want this to be applicable to any element, text input, button, anchor, label etc... i'd basically be saying if the user isn't in the group(s) specified on the attribute then disable/don't allow text entry/clicking etc...
So I've wrote the following that "appears" to be performing as I expect for now, need to test more next week but it seems to be enabling/disabling dependent on what my permissionsService.permissionsForObject method returns(which goes off to webApi controller).... Does this make sense to you?
(function () {
'use strict';
angular.module('blocks.permissions').directive('canWrite', canWriteDirective);
function canWriteDirective() {
return {
//scope: {},
restict: "A",
controller: CanWriteController,
controllerAs: "vm",
bindToController: false,
link: function (scope, iElement, iAttrs, controller) {
controller.canWrite(iAttrs.canWrite);
}
}
};
CanWriteController.$inject = ["permissionsService"];
function CanWriteController(permissionService) {
var vm = this;
vm.canWrite = canWrite;
vm.canUpdate = false;
function canWrite(group) {
permissionService.permissionsForObject(group).then(function (result) {
vm.canUpdate = true;
}).catch(function (result) {
vm.canUpdate = false;
});
}
}
})();
Related
I have an angular driven form using $dirty to spot for changes to enable/disable submit button.
Part of the form uses a Directive for uploading a logo but the form is noticing this as a changed element so upon setting a logo that validates in size I need to manually trigger that the form has had a change so should be a case of formName.$setDirty(); however console is saying that $setDirty() is not defined and I think this is because I am within a directive.
Within my directives controller upon file selection I call the function below and it is here when the file is valid that I would want to call the setdirty method.
function isFileValid(file) {
vm.fileValid = true;
vm.errorMessage = "";
if (file.size > 16777216) {
vm.errorMessage = "The File is too big!";
vm.fileValid = false;
} else if (file.size == 0) {
vm.errorMessage = "The File is empty!";
vm.fileValid = false;
}
if (vm.fileValid) {
// make form dirty
$setDirty();
}
return vm.fileValid;
}
Here is the directive JS
(function () {
'use strict';
.module("tpBusinessProfile")
.directive("tpLogoUploader", tpLogoUploader);
function tpLogoUploader() {
return {
templateUrl: "tpLogoUploader.directive.html",
bindToController: true,
scope: {
changedMethod: "&"
},
controller: "tpLogoUploaderCtrl",
controllerAs: 'logoCtrl',
restrict: "E"
};
}
})();
Any help is appreciated.
You need to use directive require option and require controller of form directive:
{
require: '^form'
and then in link function bind method that you need to your scope (dirty solution):
link(scope, elem, attrs, formController){
scope.makeFormDirty = formController.$setDirty
}
and now you can use it in your controller via makeFormDirty
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
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);
}
}
};
I know the question has been asked multiple time, but I can't seem to find anywhere how to focus to an element from within a controller. What is the best approach? Would it be better to do a directive? But if so, then how would I call it within my controller? Or is it better to create a service then?
What I already have and works properly from within HTML code is a directive:
.directive('ngxFocus', ['$timeout', function($timeout) {
return function(scope, element, attr) {
$timeout(function () {
element.focus();
}, 10);
};
}])
Can I call directive within controller? I'm still learning AngularJS and I'm a bit confused on what the best approach is in this case. I really want to do it via the controller, at the moment I use a simple 1 line of jQuery to focus, but yeah it's not the Angular way and so I'd like to go with the correct way.
Note
To be more specific with an example, let say I have 10 inputs in the HTML and let say that inside the execution of a function (defined in the controller), I want to focus on 1 of the multiple inputs directly from the function (again this is all declared inside the controller). I would rather not write anything inside the HTML code, if possible, but instead call a focus function or something that will focus to the input I chose. I know I could write it simply in jQuery with $('input12').focus(); but I want to know how to do it the AngularJS way. All the answers I get so far are based on writing a Directive, that also equals to writing something inside the HTML, isn't there any other way???
Example
For more explicit example of my form... I have a first input connected to a Yahoo web service (stock market), this input filled by the user will hold a stock quotes symbol that can be anywhere in the world and then the user will choose (from a dropdown) his Bank account... now from there, my controller will check that the stock quotes market is in the same currency as the user's bank account (ex.: GOOG is US currency, if user's account is in $CAD, it will fail because GOOG is in $USD). If currency isn't the same, I want to advise my user and to do so I would seriously prefer to focus on the field so he could change his symbol if he made an error.
I you're trying to work with elements in controller, be sure you're going wrong, the controller's target in to bind data received from services to view, not to manipulate view.
If you want to focus on an element with route change:
app.directive('focuser', ['$location', function ($location) {
return {
restrict: 'A',
link: function ($scope, $element) {
$scope.$watch(function () {
//simply focus
$element.focus();
//or more specific
if ($location.$$url == '/specific/path') {
$element.focus();
}
});
}
};
}]);
I've made this directive:
app.directive('rfocus',function(){
return {
restrict: 'A',
controller: function($scope, $element, $attrs){
var fooName = 'setFocus' + $attrs.rfocus;
$scope[fooName] = function(){
$element.focus();
}
},
}
});
It adds to controller's $scope function to set focus on element. Name of the function is based on value given in attribute.
Using: <input type="text" rfocus="Input1"/> will create function setFocusInput1() which you can use in your controller.
Here is the fiddle: http://jsfiddle.net/aartek/2PJMQ/
I've recently started to learn Angular, too, but hopefully I can provide you a different way of approaching this.
I've been using some basic jQuery to focus, too, so in that regard, I can't really help you. However, with regard to calling a directive within a controller, I can't find any articles that say "yes, you can", or "no, you can't". I know that you can declare a controller within a directive, though, so you miiiiight be able to do something like this:
.directive('ngxFocus', function() {
return {
restrict: 'A',
controller: //do your controller stuff here
}])
I know it's an old question, but here's an other approach, where you set to true a variable in the controller, and that's this action that set the focus to your element.
Try this:
myAngularModule.directive('goFocus', ['$timeout', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
scope.$watch(attrs.goFocus, function (newValue) {
if (newValue) {
$timeout(function () {
element[0].focus();
}, 100);
}
});
element.bind("blur", function (e) {
$timeout(function () {
scope.$apply(attrs.goFocus + "=false");
}, 10);
});
element.bind("focus", function (e) {
$timeout(function () {
scope.$apply(attrs.goFocus + "=true");
}, 10);
});
}
}
}]);
In HTML template:
<input go-focus="focusvar1" type="text" ng-model="mytext1" />
<input go-focus="focusvar2" type="text" ng-model="mytext2" />
<input go-focus="focusvar3" type="text" ng-model="mytext3" />
<button ng-click="doFocus()">OK</button>
In javascript angular controller:
myAngularModule.controller('myController', function () {
var self = this;
self.doFocus = function () {
// do some logic and focus your field
self.focusvar2 = true;
};
});
I have a directive that I'd like another directive to be able to call in to. I have been trying to use directive controllers to try to achieve this.
Directive one would be sitting on the same page as directive two, and directive one would call methods exposed by directive two's controller:
Directive 1:
'use strict';
angular.module('angularTestApp')
.directive('fileLibrary', function () {
return {
templateUrl: 'views/manage/file_library/file-library.html',
require: 'videoClipDetails',
restrict: 'AE',
link: function postLink(scope, element, attrs, videClipDetailsCtrl) {
scope.doSomethingInVideoClipDirective = function() {
videClipDetailsCtrl.doSomething();
}
}
};
});
Directive Two:
'use strict';
angular.module('angularTestApp')
.directive('videoClipDetails', function () {
return {
templateUrl: 'views/video_clip/video-clip-details.html',
restrict: 'AE',
controller: function($scope, $element) {
this.doSomething = function() {
console.log('I did something');
}
},
link: function postLink(scope, element, attrs) {
console.log('videoClipDetails directive');
//start the element out as hidden
}
};
});
File where the two are used and set up as siblings:
<div>
<div video-clip-details></div>
<!-- main component for the file library -->
<div file-library></div>
</div>
I know reading documentation I picked up that the controllers can be shared when the directives are on the same element, which makes me think I might be looking at this problem the wrong way. Can anyone put me on the right track?
From the angular.js documentation on directives
When a directive uses require, $compile will throw an error unless the specified controller is found. The ^ prefix means that this directive searches for the controller on its parents (without the ^ prefix, the directive would look for the controller on just its own element).
So basically what you are trying to do with having siblings directly communicate is not possible. I had run into this same issue but I did not want to use a service for communication. What I came up with was a method of using a parent directive to manage communication between its children, which are siblings. I posted the example on github.
What happens is that both children require the parent (require: '^parentDirective') and their own controller, both of which are passed into the link function. From there each child can get a reference to the parent controller and all of its public methods, as an API of sorts.
Below is one of the children itemEditor
function itemEditor() {
var directive = {
link: link,
scope: {},
controller: controller,
controllerAs: 'vm',
require: ['^itemManager', 'itemEditor'],
templateUrl: 'app/scripts/itemManager/itemManager.directives.itemEditor.html',
restrict: 'A'
};
return directive;
function link(scope, element, attrs, controllers) {
var itemManagerController = controllers[0];
var itemEditorController = controllers[1];
itemEditorController.itemManager = itemManagerController;
itemEditorController.initialize();
}
function controller() {
var vm = this;
// Properties
vm.itemManager = {};
vm.item = { id: -1, name: "", size: "" };
// Methods
vm.initialize = initialize;
vm.updateItem = updateItem;
vm.editItem = editItem;
// Functions
function initialize() {
vm.itemManager.respondToEditsWith(vm.editItem);
}
function updateItem() {
vm.itemManager.updateItem(vm.item);
vm.item = {};
}
function editItem(item) {
vm.item.id = item.id;
vm.item.name = item.name;
vm.item.size = item.size;
}
}
}
Note how the values passed into the require array are the parent directive's name and the current directive's name. These are then both accessible in the link function via the controllers parameter. Assign the parent directive's controller as a property of the current child's and then it can be accessed within the child's controller functions via that property.
Also notice how in the child directive's link function I call an initialize function from the child's controller. This is where part of the communication lines are established.
I'm basically saying, anytime you (parent directive) receive a request to edit an item, use this method of mine named editItem which takes an item as a parameter.
Here is the parent directive
function itemManager() {
var directive = {
link: link,
controller: controller,
controllerAs: 'vm',
templateUrl: 'app/scripts/itemManager/itemManager.directives.itemManager.html',
restrict: 'A'
};
return directive;
function link(scope, element, attrs, controller) {
}
function controller() {
var vm = this;
vm.updateMethod = null;
vm.editMethod = null;
vm.updateItem = updateItem;
vm.editItem = editItem;
vm.respondToUpdatesWith = respondToUpdatesWith;
vm.respondToEditsWith = respondToEditsWith;
function updateItem(item) {
vm.updateMethod(item);
}
function editItem(item) {
vm.editMethod(item);
}
function respondToUpdatesWith(method) {
vm.updateMethod = method;
}
function respondToEditsWith(method) {
vm.editMethod = method;
}
}
}
Here in the parent you can see that the respondToEditsWith takes a method as a parameter and assigns that value to its editMethod property. This property is called whenever the controller's editItem method is called and the item object is passed on to it, thus calling the child directive's editItem method. Likewise, saving data works the same way in reverse.
Update: By the way, here is a blog post on coderwall.com where I got the original idea with good examples of require and controller options in directives. That said, his recommended syntax for the last example in that post did not work for me, which is why I created the example I reference above.
There is no real way with require to communicate between sibling elements in the way you are trying to do here. The require works the way you have set up if the two directives are on the same element.
You can't do this however because both of your directives have an associated templateUrl that you want to use, and you can only have one per element.
You could structure your html slightly differently to allow this to work though. You basically need to put one directive inside the other (transcluded) and use require: '^videoClipDetails'. Meaning that it will look to the parent to find it.
I've set up a fiddle to demonstrate this: http://jsfiddle.net/WwCvQ/1/
This is the code that makes the parent thing work:
// In videoClipDetails
template: '<div>clip details<div ng-transclude></div></div>',
transclude: 'true',
...
// in markup
<div video-clip-details>
<div file-library></div>
</div>
// in fileLibrary
require: '^videoClipDetails',
let me know if you have any questions!
I would like to disable a certain group of buttons that are available(I am using ngClick on those buttons) only for active users, and enable them again after the request that verifies that the account is indeed active resolves.
My current implementation is as follows:
directive('activeCompanyButton', function(authService, companyService) {
var defualtFunction = function(e){
e.preventDefault();
};
function bind(elem){
elem.addClass('disabled');
elem.bind('click', defualtFunction);
}
function unbind(elem){
elem.removeClass('disabled');
elem.unbind('click', defualtFunction);
}
return{
// scope: false,
link: function(scope, elem, attrs){
bind(elem);
},
controller: function($scope, $element, $attrs, authService, companyService){
function checkCompanyStatus(val){
var company = val;
var r = company && company.status == 'active';
return r;
}
$scope.$watch(function(){return companyService.getCompanyData(authService.getCompanyId())}, function(val){
console.log(val);
if(checkCompanyStatus(val)){
unbind($element);
$element.bind('click', $scope.$eval($attrs.ngClick));
}
else{
bind($element);
}
});
}
}
});
None of that is working, not even the $scope.$eval()(should i strip the '()' from the function name and leave the function to give the function reference rather than a function call?).
should I be using an isolate scope, I am not currently doing that because to the best of my understanding that would create multiple instances of dirty-checking(watchers) instead of just one.
Assuming this structure in your code:
<active-company-button>
<button style="custom" other="blah" />
</active-company-button>
One way to do this is add a templateUrl property to your directive to include a template that wraps a standard button & adds ng-disabled. You can then take advantage of ng-disabled's behavior for every button without having to add it to each button. Disadvantage is you have to put styling & other properties on the "outer" directive instead of on the button itself.
So, the above code would become this:
<active-company-button style="custom" other="blah" />