I'm trying to manipulate an element class within a directive. The directive is of a toolbar and it's supposed to add a class to 2 elements after some scroll.
The element directive itseld;
The view, to add/remove margin;
This is my html structure:
<ag-toolbar class="ag-toolbar--sec"></ag-toolbar>
<div ui-view="app" autoscroll="false" id="appView"></div>
And this is my directive:
function agToolbar($window) {
return {
restrict: 'E',
link: function(scope, element, attrs) {
var elView;
setTimeout(function(){
elView = document.getElementById("appView");
}, 400);
angular.element($window).bind("scroll", function() {
if (this.pageYOffset >= 128) {
element.addClass('scroll');
elView.addClass('agMargin');
} else {
element.removeClass('scroll');
elView.removeClass('agMargin');
};
});
}
};
}
In the console I keep getting the error:
elView.addClass is not a function
elView.removeClass is not a function
But the element.addClass is working fine. Any ideas why?
addClass belongs to jqLite (or jQuery if available), see https://docs.angularjs.org/api/ng/function/angular.element.
That is, you need to wrap the DOM element in a jqLite/jQuery element:
elView = angular.element(document.getElementById("appView"));
Related
I have a angular directive to generate nested list structure. However when i get large data, browser gets stuck & is very slow. If it was only ng-repeat i could have used limitTo but this is a recursive template. Any suggestion please.
http://jsfiddle.net/L97o5swa/14/
treeModule.directive('tmTree', function() {
return {
restrict: 'E', // tells Angular to apply this to only html tag that is <tree>
replace: true, // tells Angular to replace <tree> by the whole template
scope: {
t: '=src',
fetchChildren: '&fetchChildren',
selectNode : '&selectNode' // create an isolated scope variable 't' and pass 'src' to it.
},
controller : function($scope){
console.log('aaa');
},
template: '<ul><branch ng-repeat="c in t.children" src="c" fetch-children="fetchChildren()" select-Node="selectNode({node :child})" ng-class="c.expandChildren ? \'\':\'collapsed\' "></branch></ul>' ,
link: function(scope, element, attrs) {
}
};
});
treeModule.directive('branch', function($compile) {
return {
restrict: 'E', // tells Angular to apply this to only html tag that is <branch>
replace: true, // tells Angular to replace <branch> by the whole template
scope: {
b: '=src',
fetchChildren: '&fetchChildren', // create an isolated scope variable 'b' and pass 'src' to it.
selectNode : '&selectNode'
},
controller : function($scope,$element){
} ,
template: '<li class="treeNode"><div class="wholerow"></div><span id="chevron-right" class="glyphicon glyphicon-chevron-right" ></span><a ng-click="selectNode({child : b})">{{ b.text }}</a></li>',
link: function(scope, element, attrs) {
//// Check if there are any children, otherwise we'll have infinite execution
var has_children = angular.isArray(scope.b.children);
var parent = scope.b;
//// Manipulate HTML in DOM
if (has_children) {
element.append($compile( '<tm-tree src="b" fetch-children="fetchChildren()" select-Node="selectNode({node:child})" ></tm-tree>')(scope) );
// recompile Angular because of manual appending
//$compile(element.contents())(scope);
}
var chevronRight = angular.element(element.children()[1]);
chevronRight.on('click',function(event) {
event.stopPropagation();
chevronRight.toggleClass('glyphicon-chevron-right');
chevronRight.toggleClass('glyphicon-chevron-down');
if(has_children){
element.toggleClass('collapsed');
if(scope.b.children.length == 0) {
}
}
});
}
};
});
Hard to tell based on the piece of code you posted. But my initial instinct is that you shouldn't be using so many jqLite references like element and append. You should handle more of this functionality within the template itself using ngRepeat (ie. if (has_children) { element.append...) and ngClick (ie. chevronRight.on('click'...). jqLite operations are expensive.
How do you get the value of the binding based on an angular js directive restrict: 'A'?
<span directiverestrict> {{binding}} </span>
I tried using elem[0].innerText but it returns the exact binding '{{binding}}' not the value of the binding
.directive('directiverestrict',function() {
return {
restrict:'A',
link: function(scope, elem, attr) {
// I want to get the value of the binding enclosed in the elements directive without ngModels
console.log(elem[0].textContent) //----> returns '{{binding}}'
}
};
});
You can use the $interpolate service, eg
.directive('logContent', function($log, $interpolate) {
return {
restrict: 'A',
link: function postLink(scope, element) {
$log.debug($interpolate(element.text())(scope));
}
};
});
Plunker
<span directiverestrict bind-value="binding"> {{binding}} </span>
SCRIPT
directive("directiverestrict", function () {
return {
restrict : "A",
scope : {
value : '=bindValue'
},
link : function (scope,ele,attr) {
alert(scope.value);
}
}
});
During the link phase the inner bindings are not evaluated, the easiest hack here would be to use $timeout service to delay evaluation of inner content to next digest cycle, such as
$timeout(function() {
console.log(elem[0].textContent);
},0);
Try ng-transclude. Be sure to set transclude: true on the directive as well. I was under the impression this was only needed to render the text on the page. I was wrong. This was needed for me to be able to get the value into my link function as well.
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
my html is taking input in two form, input and contenteditable div . I want to write one directive that handles both, but I cannot find a way to figure out which tag has called the function (because Angular's JQLite doesnt provide a is() or get() function). The following code will be complete if I can figure out to evaluate IS_INPUT_TAG:
function funct() { return {
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
// view -> model
element.bind('input', function() {
scope.$apply(function() {
if(IS_INPUT_TAG)
ctrl.$setViewValue(element.val());
else
ctrl.$setViewValue(element.text());
scope.watchCallback(element.attr('data-ng-model'));
});
});
// model -> view
ctrl.$render = function() {
if(IS_INPUT_TAG)
element.val(ctrl.$viewValue);
else
element.text(ctrl.$viewValue);
};
}};
}
app.directive('input', funct);
app.directive('contenteditable', funct);
In your directive, you can make use of the element parameter of the linking function to identify the tag on which the directive is applied. You can then use that in your IF condition as follows:
ctrl.$render = function() {
var tagname = element["0"].tagName;
if(tagName === "INPUT")
element.val(ctrl.$viewValue);
else
element.text(ctrl.$viewValue);
};
After, this you can simply attach the directive to the input and the div tags as an attribute to the tags to identify the tag to which the directive is applied.
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!