I'm wanting to add active classes to elements when various Angular UI directives are called. For example when I call the popover i'd like to highlight the element (which in this case is a button). I know that I can just add ng-click with an expression but I want a more robust solution.
I'm not sure how to modify the directive(s) so I'm able to obtain the target element and toggle the class. I have created a fiddle and I was hoping that someone can assist with this.
I appreciate the help guys, thanks.
Angular does not restrict you from defining directives with the same name as those in ui-bootstrap. That does not mean you override them (although you could), you merely apply them additively. As long as you don't break their original functionality, you can do something like:
app.directive("popover", function () {
return {
restrict: 'EA',
priority: -1000, // Run last
link: function (scope, element) {
element.addClass("my-popover");
scope.$watch('tt_isOpen', function (value) {
if (value) {
element.addClass("open");
} else {
element.removeClass("open");
}
});
}
};
});
app.directive("tooltip", function () {
return {
restrict: 'EA',
priority: -1000, // Run last
link: function (scope, element) {
element.addClass("my-tooltip");
scope.$watch('tt_isOpen', function (value) {
if (value) {
element.addClass("open");
} else {
element.removeClass("open");
}
});
}
};
});
And then define styles like:
.my-popover.open {
background-color: red;
}
.my-tooltip.open {
font-style:italic;
color: orange;
}
Unfortunately, you are a bit dependent on the original implementation details (where on earth did this tt_isOpen came from).
Check it out here.
Related
I'm trying to adding rtl-ltr support for my application .
here is the question : assume that there is input like this :
<span class="sp-right">
<label>
Number:
</label>
</span>
is it possible to change all sp-right class to sp-left programmatically ?
is it a good idea in ltr and rtl support in angular ?
Thanks
With jQuery
$(".sp-right").each(function(){
$(this).removeClass("sp-right").addClass("sp-left");
});
Above code will run once only in code sequence. Put it in event listening function like:
$("button.trigger").click(function(){
$(".sp-right").each(function(){
$(this).removeClass("sp-right").addClass("sp-left");
});
});
Then it will run when event trigger.
Or you can build a directive. I am writing for you
_module.directive("spRight", function () {
return {
restrict: 'C',
link: function (scope, element, attrs) {
element.removeClass("sp-right").addClass("sp-left");
}
};
});
UPDATE:
app.directive("buttonThatTrigger", function () {
return {
restrict: 'C',//target all elements with class button-that-trigger
link: function (scope, element, attrs) {
element.click(function(){
$(".sp-right").each(function(){
$(this).removeClass("sp-right").addClass("sp-left");
});
});
}
};
});
Then add a class in button:
<button class="button-that-trigger"></button>
One more approach. Instead of changing multiple classes on the page (although it's not that difficult), it's much more reasonable to change only one class on the top level of the application container and from there manage all the classes with CSS.
For example:
<span class="sp-direction">
<label>Number:</label>
</span>
In CSS
.sp-direction {
direction: ltr; /* default text direction */
}
.sp-right .sp-direction {
direction: rtl;
}
.sp-left .sp-direction {
direction: ltr;
}
Now all you need to do is to change sp-right/sp-left classes on say body tag:
<body class="sp-{{spClass}}">
And in any controller:
$rootScope.spClass = 'left';
$rootScope.spClass = 'right';
Some actions in my Angular app require the user to be registered. If the user is not registered we want to show a "Register modal" and prevent the original action.
Those actions can be triggered via ng-click or any other "click binding" directive (for example the 'modal-toggle' one).
So I found this solution: https://stackoverflow.com/a/16211108/2719044
This is pretty cool but only works with ng-click.
I first wanted to make the "terminal" property of the directive dynamic but couldn't manage to do it.
So the idea was to set "terminal" to true and manually prevent default click action in the directive.
Here is my DOM
<!-- This can work with terminal:true and scope.$eval(attrs.ngClick) (see example above) -->
<div user-needed ng-click="myAction()">Do it !</div>
<!-- This doesn't work. I can't manage to prevent the modal-toggle to be executed -->
<div user-needed modal-toggle="my-modal-id-yey">Show yourself modal !</div>
And my directive(s) (which don't work...)
// First try (with terminal:true)
app.directive('userNeeded', function() {
return {
priority: -100,
terminal: true,
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function(e) {
if(isRegistered()) {
// Here we do the action like scope.$eval or something
}
});
}
};
});
// Second try (with stopPropagation)
app.directive('userNeeded', function() {
return {
priority: -100
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function(e) {
if(!isRegistered()) {
e.stopPropagation();
}
});
}
};
});
...And that's why I'm here. Any idea ?
Thanks a lot.
You were extremely close. Instead of stopPropagation you needed stopImmediatePropagation. The difference between the two is summarized in this StackOverflow answer by #Dave:
stopPropagation will prevent any parent handlers from being
executed while stopImmediatePropagation will do the same but
also prevent other handlers from executing.
So to fix the code, all we have to do is swap out that method and Voilà:
app.directive('userNeeded', function() {
return {
priority: -100
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function(e) {
if(!isRegistered()) {
e.stopImmediatePropagation();
}
});
}
};
});
Here is an example Plunker of the working code. In the example I modified the directive slightly to allow specific events to be specified (such as user-needed="submit") by passing the value directly to the element.bind function; however, it defaults to 'click'.
Let's say you have a simple animation directive for slide-in:
directives.directive('slideIn', function () {
return {
compile:function (elm) {
$(elm).css('padding-left', '200em');
return function (scope, elm, attrs) {
$(elm).animate({ 'padding-left':'0em'}, 500);
};
}
};
});
And html:
<div slide-in>foo</div>
Works great.
Now let's say the html uses Angular interpolation:
<div slide-in>{{foo}}</div>
This works on the first change to the value of scope.foo, but not on subsequent attempts.
Question is: How to reapply the directive on each change?
Seems like putting this in a link function with a watch is the way to go...
When your app start, Angular go throw all Dom and compile all directive. You see animation once because angular compile once. You seems right, you should do it with $watch.
Here is a solution: http://jsfiddle.net/pbucv/12/
.directive('slideIn', function () {
return {
link: function (scope, elm, attrs) {
scope.$watch("foo", function() {
$(elm).css('padding-left', '200em');
$(elm).animate({ 'padding-left':'0em'}, 500);
})
}
};
});
If you want use this approach for do animation, you should learn about Angular animation. If you use Angular 1.2 here is good article about it http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
I have a small amount of js in the app.js file that I needed in order to manipulate the DOM in this Angular Grid:
http://plnkr.co/PXRgUA
You can see it in app.js.
$('.userRow ').live('click', function(e) {
$(this).find('span.userDetailRow.blueRow').show().animate({height:200},500);
});
$('.closeDetails').live('click', function(e) {
$(this).parent('span').animate({height:0}, 500).animate({height:0},500).hide();
e.stopPropagation();
});
How can I move this to a directive?
Does it have to be moved to a directive?
It does not seem right here.
Yes, you can (and should) move it to a directive. For the sake of clarity I'll include your old code here:
$('.userRow ').live('click', function(e) {
$(this).find('span.userDetailRow.blueRow').show().animate({height:200},500);
});
$('.closeDetails').live('click', function(e) {
$(this).parent('span').animate({height:0}, 500).animate({height:0},500).hide();
e.stopPropagation();
});
This (binding event listeners with jquery) is what people are chomping at the bit to describe as 'not the angular way.' Instead, you can use ng-click (which is just an inbuilt directive) to call javascript functions:
<tr row ng-click="expandRow()" ng-repeat="user in users" class="item-in-list el userRow" animate="fadeIn">
<span class="userDetailRow blueRow" style="display:none;"><span close ng-click="closeDetails(); $event.stopPropagation()">x</span>
You can see here there are two custom attributes defined on these elements. These link to the directives below. These directives have custom functions defined in their link function which you can then call with ng-click (though note that this is putting these functions on the global scope).
.directive('close', function() {
return {
restrict: 'A',
replace: false,
link: function($scope, element, attrs) {
$scope.closeDetails = function() {
$(element).parent('span').animate({height:0}, 500).animate({height:0},500).hide();
}
}
}
})
.directive('row', function() {
return {
restrict: 'A',
replace: false,
link: function($scope, element, attrs) {
$scope.expandRow = function() {
$(element).find('span.userDetailRow.blueRow').show().animate({height:200},500);
}
}
}
});
jQuery is still being used to here to locate and modify the elements for the sake of simplicity, so you can see where your old logic has gone. However you should ideally change this to use angular's inbuilt animation functionality. (more info on how animation works in the new angular version: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html)
Plunker here:
http://plnkr.co/edit/UMvYnx?p=preview
For an only visual editor I'm trying to create a new directive that writes a CSS style. I'm stuck at trying to get the directive to update when a checkbox is clicked to make the background-color property transparent.
Here's my (non-working) directive:
myApp.directive('customstyle', function () {
return {
restrict: 'E',
link: function (scope, element, attrs) {
var bgColor;
scope.$watch(attrs.myTransparent, function (value) {
if (value) {
bgColor = 'transparent';
} else {
bgColor = attrs.myBgcolor;
}
updateStyle();
}, true);
function updateStyle() {
var htmlText = '<style>.' + attrs.myClass + '{';
htmlText += 'background-color: ' + bgColor + ';';
htmlText += "}</style>";
element.replaceWith(htmlText);
}
updateStyle();
}
}
});
and html element:
<customstyle my-class="examplediv" my-transparent="settings.Window.Transparent" my-bgcolor="settings.Window.BackgroundColor"></customstyle>
Here's a jsfiddle of the situation: http://jsfiddle.net/psinke/jYQc6/
Any help would be greatly appreciated.
Try using the directive directly on the element you want to change, it's easier to do and to maintain.
HTML:
<div class="examplediv customstyle"
my-transparent="settings.Window.Transparent"
my-bgcolor="{{settings.Window.BackgroundColor}}">
</div>
Note: Use {{settings.Window.BackgroundColor}} to pass the property's value and not a String.
Directive:
myApp.directive('customstyle', function () {
return {
restrict: 'AC',
link: function (scope, element, attrs) {
scope.$watch(attrs.myTransparent, function (value) {
element.css('background-color', (value ? 'transparent' : attrs.myBgcolor));
});
}
}
});
Note: Use element.css() to change CSS properties directly on the element.
jsFiddler: http://jsfiddle.net/jYQc6/8/
I was having the same problem and using bmleite's solution solved it. I had a custom element with a custom attribute very similar to the one above, and changing the directive to be applied on a regular DIV instead of the custom attribute fixed it for me.
In my solution I also have the following line of code right after the element has been modified:
$compile(element.contents())(scope);
Remember to inject the $compile service in the directive function declaration:
myApp.directive('directiveName', function ($compile) { ...
Thanks for a great post!