How do I show canvas element inside custom angular directives?
I am very new to angularjs. Please get me any demo/idea about chartjs with angularjs.
Note: I want custom directive to show charts
This is what i tried in js->
var demo = angular.module('newchart');
demo.directive('chartdiv', function() {
return {
restrict: 'E',
template: '<canvas id="chartNew" class="chart chart-line col-md-12 col-sm-12" chart-data="chartData" chart-labels="chartLbl" chart-series="chartseries" width="700" height="280" chart-colors="colr_nofill" chart-options="chartopt"></canvas>'
};
});
In directive you can't access the scope variable of particular controllers.To know about scope access directive try this https://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope
You can also try the below code
demo.directive('chartdiv', function() {
return {
transclude: true,
restrict: 'E',
scope: {
chartLbl: "#",
chartseries:"#",
chartopt:"#",
chartData:"#",
colr_nofill:"#",
},
template: '<canvas id="chartNew"
chart-data="chartData" chart-labels="chartLbl" chart-series="chartseries"
width="700" height="280" chart-colors="colr_nofill" chart-
options="chartopt">
</canvas>'
link: function(scope){
/*You can add css class here */
chartNew.addClass("chart");
}
};
});
In HTML you can pass the angularjs scope data in a variable on custom directive tag and get it in directive and use it in the template.
<chart chartData="{{chart_chartData}}"
chartLbl="{{chart_chartLbl}}" chartopt="{{chart_chartopt}}"
colr_nofill="{{chart_colr_nofill}}"
chartseries="{{chart_chartseries}}">
</chart>
Related
I set up a directive as follows:
.directive('ogTakeATour', function() {
return {
restrict: 'E',
replace: true,
templateUrl: '../scripts/directives/TakeATourTemplate.html',
scope: {
content: '#',
uid: '#'
},
link: function(scope) {
angular.element(scope.uid).css("top","250px");
}
};
});
Directive template looks like this:
<div id="{{uid}}" class="tourContainer">
{{content}}
</div>
And this is how I call my directive:
<og-take-a-tour content="Content goes here" uid="menuTour"></og-take-a-tour>
However for some reasons this does not apply the css to the applicable div.
angular.element(scope.uid).css("top","250px");
Why is this? Could it be that the directive does not know what the id of my element is at the time the link function is running? How would I get around this if that is the case?
Angular's jQlite does not support search by id or CSS selector. So change your code like this:
angular.element(document.querySelector('#' + scope.uid)).css("top", "250px");
I want to create a directive like:
<div ng-refreshing-when="x">Some Content In Here</div>
so when x=true, it will do some css and fade a spinner div over top, then when x=false, the spinner will fade out. I want to append a div (which is hidden by css) to the parent div, NOT replace the content. My current code is here, but the ngRefreshingWhen isn't triggering the ng-if:
http://plnkr.co/edit/griUYR6RY46x5DlqVHWU?p=preview
I set:
$scope.refreshing = false;
so the "refreshing" text shouldn't be there...
How can I accomplish this?
You should be able to use transclude and put the HTML in the template:...
angular.module('ngRefreshingWhen',[])
.directive('ngRefreshingWhen', function ($compile) {
return {
restrict: 'A',
transclude: true,
template: '<div class="refresher" ng-if="ngRefreshingWhen"><p>Refreshing</p></div><div ng-if="!ngRefreshingWhen" ng-transclude></div>',
scope: {
ngRefreshingWhen: '='
}
};
});
If the HTML is more complicated, put it in a separate file and use templateUrl.
http://plnkr.co/edit/28Eq0HARKF0KXpYJwBTS?p=preview
<div> <!-- Parent Div -->
<div ng-refreshing-when="refreshing"></div>
<p>Some Stuff I Want to Keep</p>
</div>
&
angular.module('ngRefreshingWhen', [])
.directive('ngRefreshingWhen', function($compile) {
return {
restrict: 'A',
scope: {
ngRefreshingWhen: '='
},
template: '<div class="refresher" ng-if="ngRefreshingWhen"><i class="fa fa-spin fa-refresh"></i></div>',
link: function(scope, element, attrs) {
// add has-refresher class
element.parent().addClass('has-refresher');
}
};
});
http://plnkr.co/edit/xRgqqOfz9IuskL1kn057?p=preview
I did it differently, I added directive inside, then added the needed class to it's parent, same result, just added an element instead of trying to add an attribute to the parent.
I've got an AngularJS directive that is not placing a string (intended to be a relative path to an image) inside one of the attributes in an HTML element and I'm at a loss as to why.
My item looks like the following:
item : {
name: 'Test Name',
link: 'Assets/logo.png'
}
If I step through the javascript, I'm correctly receiving the link from the webservice, so that's not the problem as my Angular controller properly shows the link in the $scope.
The following is what I have in the template for that controller that I'm having the problem with:
<my-directive name="{{item.name}}" link="{{item.link}}"></my-directive>
Here's the javascript for my directive:
angular.module('myModule').directive('myDirective', function() {
return {
restrict: 'E',
replace: true,
templateUrl: '/RelativePathToTemplateFile.html',
scope: {},
link: function($scope, element, attr, model) {
$scope.name = attr.name;
$scope.link = attr.link;
}
}
})
When I look at the rendered HTML, I have the following:
<div name="Test Name" link></div>
What's going on? How can I pass this link in properly?
Directive scope binding technique can resolve this issue. Try to use "#" to bind the directive property to the evaluated DOM attribute.
HTML
<div ng-controller="myCtrl">
<my-directive my-name="{{item.name}}" my-link="{{item.link}}"></my-directive>
</div>
Javascript
angular.module("myApp",[])
.controller("myCtrl",function($scope){
$scope.item = {
name:"Test Name",
link:"Assets/logo.png"
};
})
.directive("myDirective",function(){
return {
restrict: "E",
template: '<div name="{{myName}}" link="{{myLink}}">{{myName}}</div>',
replace: true,
scope:{
myName:"#",
myLink:"#"
}
};
});
Here is a jsFiddle DEMO, you could refer to it.
From the documentation:
function link(scope, element, attrs) { ... } where:
* scope is an Angular scope object.
* element is the jqLite-wrapped element that this directive matches.
* attrs is a hash object with key-value pairs of normalized attribute names and their corresponding attribute values.
so it's "attrs", not "attr"
try:
<myDirective name="item.name" link="item.link"></myDirective>
It will be better :)
I am using Angular UI Bootstrap popover . Rather than giving the text i want to load the popover content from Div or a html template. here is the sample directive i am using
app.directive('customPopover', function () {
return {
restrict: 'A',
template: '<span>{{label}}</span>',
link: function (scope, el, attrs) {
scope.label = attrs.popoverLabel;
$(el).popover({
trigger: 'click',
html: true,
content: attrs.popoverHtml,
placement: attrs.popoverPlacement
});
}
};
});
<button popover-placement="bottom" **popover**="On the Bottom!" class="btn btn-default">Bottom</button>
How can i get custom text either from a Div or from any HTML template ?
you can directly use popover-template="your-template.html" along with the other attribs of the button, because you are already using angular bootstrap version, that shouldn't be an issue
Is it possible to bind to the text of an element without actually dropping into the link function?
<blink>Text Here or {{ controllerText() }}</blink>
// add a namespace for custom directives
angular.module('mydirectives', []);
angular.module('mydirectives').directive('blink', function() {
return {
restrict: 'E',
template: '<marquee scrollamount="100%">{{ can i do it here? }} </marquee>',
scope: {
// can i do it here?
}
};
});
So this is done with transclusion which merges the content of the original element with the template. The ng-transclude tag in the template is required to get it to work.
<blink>Bring the blink back<blink>
// add a namespace for custom directives
angular.module('mydirectives', []);
angular.module('mydirectives').directive('blink', function() {
return {
restrict: 'E',
transclude: true,
template: '<marquee scrollamount="100%" ng-transclude></marquee>'
}
});
You absolute can.
scope: {
text: '='
}
This adds a text attribute to the isolate scope that is linked to the value of the text attribute from the element.
So you need to change the html slightly to:
<blink text="fromController"></blink>
And then add that fromController attribute in the enclosing controller.
Here's a (very annoying) fiddle.