I'm trying to add an ng-click attribute in the return of my formatter object in highcharts:
formatter: function() {
var item = "";
if (this.series.name == fluidVsConsumerDaily.pondSelection.pondName) {
item = angular.element('<a> Pond Volume Level: <b>' + this.y + '(BBL)</b></a>');
} else {
item = angular.element('<button ng-click="vCtrl.section.dashboard.fluidVsConsumerDaily.openFluidSourceModal(' + this.series.options.fluidSourceFacilityId + ')"> Fluid Source: <b>' + this.series.options.fluidSourceName + '</b> - ' + this.y + '(BBL) </button>');
}
var element = $compile(item)(vm);
$scope.$digest();
return element.html();
},
Unfortunately the click still doesn't work. When i'm inspecting the DOM, ng-click is present.
Thanks in advance.
Related
I have isse when I want to implement multi select input in my project react typescript.
Property 'form_blocks' does not exist on type 'GanttStatic'.
how to fix it.
could any one help me please
gantt.form_blocks['multiselect'] = {
render: function(sns) {
var height = (sns.height || '23') + 'px';
var html =
"<div class='gantt_cal_ltext gantt_cal_chosen gantt_cal_multiselect' style='height:" +
height +
";'><select data-placeholder='...' class='chosen-select' multiple>";
if (sns.options) {
for (var i = 0; i < sns.options.length; i++) {
if (sns.unassigned_value !== undefined && sns.options[i].key == sns.unassigned_value) {
continue;
}
html += "<option value='" + sns.options[i].key + "'>" + sns.options[i].label + '</option>';
}
}
html += '</select></div>';
return html;
}
solved use add union any type.
I am having an issue dynamically loading components with {{}} using Angular 1.6.x
I can load the components dynamically just fine using compile, but the issue I am facing is adding an ng-if={{}} to the html string.
If I go this route it will take what ever vm.page is set to at the time. i.e. 1:
for (var i = 0; i < vm.wizardPages.length; i++) {
var newScope = $scope.$new(true, $scope);
newScope = angular.merge(newScope, vm.wizardPages[i]);
var html = '<' + vm.wizardPages[i].componentName + ' ng-if="' +
vm.page + ' === ' + (i + 1) + '"></' + vm.wizardPages[i].componentName
+ '>';
var element = $('page');
element.append($compile(html)(newScope));
}
Above renders:
<service-center-branch-selection ng-if="1 === 1" class="ng-scope ng-isolate-scope">
...
</service-center-branch-selection>
How can I call compile with {{}} in the string so vm.page is using data binding and can change when vm.page changes value?:
// loop through the data and inject components
for (var i = 0; i < vm.wizardPages.length; i++) {
var newScope = $scope.$new(true, $scope);
newScope = angular.merge(newScope, vm.wizardPages[i]);
var html = '<' + vm.wizardPages[i].componentName + ' ng-if="{{vm.page}} === ' + (i + 1) + '"></' + vm.wizardPages[i].componentName + '>';
var element = $('page');
element.append($compile(html)(newScope));
console.log(newScope);
}
I want the above to work with:
<service-center-branch-selection ng-if="vm.page === 1" class="ng-scope ng-isolate-scope">
...
</service-center-branch-selection>
Changed to "currentPage":
// loop through the data and inject components
for (var i = 0; i < vm.wizardPages.length; i++) {
var newScope = $scope.$new(true, $scope);
newScope = angular.merge(newScope, vm.wizardPages[i]);
var html = '<' + vm.wizardPages[i].componentName + ' ng-if="currentPage === ' + (i + 1) + '"></' + vm.wizardPages[i].componentName + '>';
var element = $('page');
element.append($compile(html)(newScope));
console.log(newScope);
}
Add 'currentPage' binding to component so available for new scope:
app.component("wizard", {
template: require('./wizard.component.html'),
controllerAs: "vm",
controller: wizardController,
bindings: {
breadcrumbs: '<',
wizardPages: '<',
currentPage: '<'
}
});
Add variable input to markup
<wizard breadcrumbs="vm.breadcrumbs" wizard-pages="vm.wizardPages" current-page="vm.page">
...
</wizard>
This is untested, but hopefully gives you the idea. Also, if the isolate scope has the ability to change the current page then you will need to update it to a two-way binding of course.
I have a number of spans being created with ng-repeat:
<div class="row" id="year-1">
<span class="event" ng-repeat="(key, event) in events" event data-start={{event.date_start}} data-end={{event.date_end}} data-key={{key}} data-type={{event.role}}>
{{event.title}} - {{event.date_start}}
</span>
</div>
I have a directive for event which does a number of things to manipulate each span created accordingly. One of the things is to check is there are other spans with data-type="X".
In my directive, if I do the following, I get all the span's with class 'event':
var parentid = angular.element(document.getElementById('year-1'));
var typeExists = parentid[0].querySelectorAll('.event')[0];
But if I try to narrow it down to data-type="X" such as the following, I get undefined.
var typeExists = parentid[0].querySelectorAll('.event[data-type="' + attr.type + '"]')[0];
Am I overlooking something? Full directive:
angular.module("app").directive("event", function() {
return {
link: function(scope, element, attr) {
var getStart = attr.start.split('-'),
getEnd = attr.end.split('-'),
getKey = attr.key;
getHeight = element[0].offsetHeight;
var parentid = angular.element(document.getElementById('year-1')),
backgroundParent = angular.element(document.getElementsByClassName('year-current'));
// get the month event starts with
var monthStart = angular.element(document.querySelectorAll('[data-location="' + getStart[1] + '"]'));
// get the month event ends with
var monthEnd = angular.element(document.querySelectorAll('[data-location="' + getEnd[1] + '"]'));
// how many events do we have
var eventcount = angular.element(document.getElementsByClassName('event'));
// get width of events container
var eventsContainer = angular.element(document.getElementById('events'));
// does this type exist already, if so get its top
var typeExists = parentid[0].querySelectorAll('.event')[0];
console.log(typeExists);
if(monthStart.length > 0) {
// how many days in start month
var daysStart = getDaysInMonth(getStart[1], getStart[0]),
daysStartPercent = (getStart[2] / daysStart.length);
// how many days in end month
var daysEnd = getDaysInMonth(getEnd[1], getEnd[0]),
daysEndPercent = (getEnd[2] / daysEnd.length);
// determine left starting %
var elementLeft = ((monthStart[0].offsetLeft + (monthStart[0].clientWidth * daysStartPercent)) / eventsContainer[0].clientWidth) * 100;
// determine width in %
var elementRight = ((monthEnd[0].offsetLeft + (monthEnd[0].clientWidth * daysEndPercent)) / eventsContainer[0].clientWidth) * 100;
var width = (elementRight - elementLeft);
// get the background color for this role
var background = angular.element(document.querySelector('.role[data-type="' + attr.type + '"]'))[0].getAttribute('data-background');
element.css({
'left': elementLeft + '%',
'top' : parentid[0].offsetHeight + 'px',
'width': width + '%',
'background': background
});
element.addClass('stretchRight');
parentid.css({'height': parentid[0].offsetHeight + getHeight + 'px'});
backgroundParent.css({'height': parentid[0].offsetHeight + getHeight + 'px'});
} else {
element.css({ 'display': 'none' });
}
}
}
});
I was able to recreate the problem you saw and found that you need to change your line from this:
var typeExists = parentid[0].querySelectorAll('.event[data-type="' + attr.type + '"]')[0];
to this:
var typeExists = parentid.querySelectorAll('.event[data-type="' + attr.type + '"]')[0];
Remove the [0] from your parentid reference because you only have a single element with ID of year-1 which means it's not an array.
I am having a angularjs treeview, it is working fine in all respects except the load time with a large data. In my case it is taking at-least 10 sec to load the tree which is obviously not acceptable. There is no issue with getting the data. The data I need to create the tree is coming in milliseconds but the tree creation time is high. I have tried few of things for that but nothing worked out.
Now, what I want is that, instead of creating the whole tree at the first time it should be created in parts like initially only the parent nodes should be shown and when the user clicks on any node then only the child nodes of that parent should be created. In this way we can reduce the size of tree model we are providing initially and thus the creation time will also be reduced. But now the problem is I don't know how to do this, because whatever I tried didn't worked. If anyone have any idea about that please help me.
If there is any other way to reduce the time, please tell me that also. I just want to load it within milliseconds.
Here is the HTML file:
<div class="nowrap"
style="height: 400px; overflow: scroll;">
<div data-angular-treeview="true"
data-tree-id="mytree"
data-tree-model="roleList"
data-node-id="id"
data-node-label="name"
data-node-children="children"
my-event="selectNode"
data-collapsed="true"
data-search-query="treeSearchQuery">
</div>
</div>
angular.treeview.js:
(function ( angular ) {
'use strict';
angular.module( 'angularTreeview', [] )
.directive( 'treeModel', ['$compile', function( $compile ) {
return {
restrict: 'A',
link: function ( scope, element, attrs ) {
//tree id
var treeId = attrs.treeId;
//tree model
var treeModel = attrs.treeModel;
//node id
var nodeId = attrs.nodeId || 'id';
//node label
var nodeLabel = attrs.nodeLabel || 'label';
//children
var nodeChildren = attrs.nodeChildren || 'children';
//tree template
var template =
'<ul>' +
'<li data-ng-repeat="node in ' + treeModel + '">' +
'<i class="collapsed" data-ng-show="node.' + nodeChildren
+ '.length && node.collapsed" data-ng-click="'
+ treeId + '.selectNodeHead(node)">
</i>' +
'<i class="expanded" data-ng-show="node.' + nodeChildren
+ '.length && !node.collapsed" data-ng-click="'
+ treeId + '.selectNodeHead(node)">
</i>' +
'<i class="normal" data-ng-hide="node.' + nodeChildren
+ '.length">
</i> ' +
'<span data-ng-class="node.selected" data-ng-click="'
+ treeId + '.selectNodeLabel(node)">{{node.' + nodeLabel
+ '}}
</span>' +
'<div data-ng-hide="node.collapsed" data-tree-id="' + treeId
+ '" data-tree-model="node.' + nodeChildren
+ '" data-node-id=' + nodeId + ' data-node-label='
+ nodeLabel + ' data-node-children=' + nodeChildren + '>
</div>' +
'</li>' +
'</ul>';
var event = attrs.myEvent;
//check tree id, tree model
if( treeId && treeModel ) {
//root node
if( attrs.angularTreeview ) {
//create tree object if not exists
scope[treeId] = scope[treeId] || {};
//if node head clicks,
scope[treeId].selectNodeHead = scope[treeId].selectNodeHead
|| function( selectedNode ){
//Collapse or Expand
selectedNode.collapsed = !selectedNode.collapsed;
};
//if node label clicks,
scope[treeId].selectNodeLabel = scope[treeId].selectNodeLabel
|| function( selectedNode ){
//remove highlight from previous node
if( scope[treeId].currentNode
&& scope[treeId].currentNode.selected ) {
scope[treeId].currentNode.selected = undefined;
}
//set highlight to selected node
selectedNode.selected = 'selected';
//set currentNode
scope[treeId].currentNode = selectedNode;
};
}
//Rendering template.
element.html('').append( $compile( template )( scope ) );
}
}
};
}]);
})( angular );
Controller:
rsBaseApp.controller('cascadingTreeCtrl', [
'$scope','rsSiteServerTreeViewFactory', function ($scope,rsSiteServerTreeViewFactory) {
$scope.getdata = function () {
rsSiteServerTreeViewFactory.get(function (response) {
$scope.roleList = response.data;
},
function (errorInfo) {
//alert("Some error occured");
});
}
$scope.getdata();
}
]);
I have this chart http://jsfiddle.net/Cp73s/2169/, I want to add different icons in the legend but I dont know How can do it.
labelFormatter: function () {
$scope.data = this.total;
console.log($scope.data);
return '<img src="http://icons.iconarchive.com/icons/visualpharm/must-have/256/Check-icon.png" width="15" height="15"></span>' + this.y + ' (' + this.percentage.toFixed(2) + '%) - ' + this.name;
},
There's quite an extensive list, so you'll need to manually map out what images you'd like to use for each item. I've created a JSFiddle which illustrates how to do this using a switch statement.
To make it a bit quicker I've used Font Awesome which i'd recommend looking in to:
labelFormatter: function () {
$scope.data = this.total;
var labelName = this.name,
icon = '';
switch(labelName){
case 'APP Android':
icon = 'android';
break;
case 'APP Ios':
icon = 'apple';
break;
default: // If no match is found, revert to a check icon
icon = 'check'
}
return '<i class="fa fa-' + icon + '"></i> ' + this.y + ' ('+ this.percentage.toFixed(2) +'%) - ' +this.name;
},