The fiddle I have created is given below..the issue is that the val in template of json object is not being updated even after $compile inside my dynamicContent directive. Can someone help?
http://jsfiddle.net/hyvz75cz
var app = angular.module('app', []);
app.controller('fieldController', function ($scope) {
$scope.columns = [
{ label: "First Name", name: "Fname", template: "<div>{{val}}</div>" },
{ label: "Last Name", name: "Lname", template: "<div>{{val}}</div>" },
{ label: "Email", name: "Email", template: "<div>{{val}}</div>" }
];
$scope.data = [
{ Fname: "Tom", Lname: "Assassin", Email: "tom#d.c" },
{ Fname: "chris", Lname: "Unkown", Email: "chris#d.c" },
{ Fname: "troy", Lname: "forever", Email: "troy#d.c" },
{ Fname: "bead", Lname: "trash", Email: "bead#d.c" },
];
});
app.directive('dynamicHeader', function ($compile) {
return {
restrict: 'E',
replace: true,
scope: { model : '='},
template: '<div>{{model.label}}</div>',
link: function (scope, element) {
$compile(element)(scope);
}
};
});
app.directive('dynamicContent', function ($compile) {
return {
restrict: 'E',
replace: true,
scope: {
model: '=',
val: '='
},
template: '<div>{{model}}</div>',
link: function (scope, element) {
$compile(element)(scope);
}
};
});
I corrected your plunker example:
http://jsfiddle.net/hyvz75cz/5/
scope: {
model: '=',
val: '='
},
template: '',
link: function (scope, element) {
element.append(scope.model);
$compile(element.contents())(scope);
}
Related
two questions: is it possible to access my showData() function that is located in the controller even though its not within the directive? I also have placed one in the directive but it is still not alerting? please advice on what i am doing wrong.
var myApp = angular.module('myApp', []);
myApp.controller('productController', ['$scope',
function($scope) {
$scope.product1 = {
name: 'Phone',
price: '100',
stock: true
};
$scope.product2 = {
name: 'Ipad',
price: '1000',
stock: true
};
$scope.product3 = {
name: 'Laptop',
price: '800',
stock: false
};
$scope.showData = function() {
alert("Display Data");
}
}
]);
myApp.directive('myInventory', function() {
return {
restrict: 'E',
scope: {
name: '#',
price: '#'
},
template: '{{name}} costs {{price}} <button ng-click="showData()">change cost</button>'
};
directive.link = function($scope, element) {
$scope.showData = function() {
alert("Display Data");
};
}
return directive;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<body ng-App="myApp">
<div ng-controller="productController">
<h1>{{product1.name}}</h1>
<my-inventory name="{{product1.name}}" price="{{product1.price}}"></my-inventory>
<h1>{{product2.name}}</h1>
<my-inventory name="{{product2.name}}" price="{{product2.price}}"></my-inventory>
<h1>{{product3.name}}</h1>
<my-inventory name="{{product3.name}}" price="{{product3.price}}"></my-inventory>
</div>
</body>
In your directive, you're returning too early so half of your code isn't executing.
myApp.directive('myInventory', function() {
return {
restrict: 'E',
scope: {
name: '#',
price: '#'
},
template: '{{name}} costs {{price}} <button ng-click="showData()">change cost</button>',
link: function($scope, element) {
$scope.showData = function() {
alert("Display Data");
};
}
});
It's possible for you to pass showData from the controller to the directive.
myApp.directive('myInventory', function() {
return {
restrict: 'E',
scope: {
name: '#',
price: '#',
showData: '&' // Add it to your scope like so
},
template: '{{name}} costs {{price}} <button ng-click="showData()">change cost</button>',
link: function($scope, element) {
// Don't need showData() here anymore
}
});
Call your directive with your function like so
<my-inventory show-data="showData()" name="{{ something }}" price="{{ something }}"></my-inventory>
I'm trying to write a directive for HighCharts in AngularJS which supports two way data binding. On click of a function in the HTML, am trying to load the graph with new data.
Please check the below snipet.
HTML:
<hc-area-chart data="areaData"></hc-area-chart>
<button ng-click="updateGraph()">Update function</button>
Controller:
angular.module('myModule', [])
.directive('hcAreaChart', function () {
return {
restrict: 'E',
template: '<div></div>',
scope: {
title: '#',
data: '='
},
link: function (scope, element) {
Highcharts.chart(element[0], {
chart: {
type: 'area'
},
title: {
text: null
},
xAxis: {
categories: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun']
},
plotOptions: {
pointStart: 4,
},
series: [{
showInLegend: false,
data: scope.data
}]
});
}
};
})
.controller('myController', function ($scope) {
$scope.areaData = [0,6,5,7,5,4.5,10];
$scope.updateGraphData = function () {
console.log("inside update function");
$scope.areaData = [10,20,30,40,50,60,70];
}
});
I think you should try something like this
link: function (scope, element) {
scope.$watch('data', function(){
Highcharts.chart(element[0], {
chart: {
type: 'area'
},
title: {
text: null
},
xAxis: {
categories: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun']
},
plotOptions: {
pointStart: 4,
},
series: [{
showInLegend: false,
data: scope.data
}]
});
})
}
I'm studying angular and trying to write treeview with dynamic load. It has some initial pre-loaded nodes, but many of them have to be loaded by demand.
I write initial tree view here jsfiddle but cannot understand how to implement lazy load.
when I click NodeLazy I want to update treeService.Nodes and this update have to refresh view
when I click any Node I want select this node by bold font and be able get selected from treeService
Sure, I could use one of existing angular tree, but I want to understand how to do this.
var app = angular.module('demo', []);
app.directive("treeView", function() {
return {
restrict: "E",
replace: true,
scope: {
t: "=src"
},
template: "<ul class='ul-node'><tree-branch ng-repeat='c in t.children' src='c'></tree-branch></ul>"
};
});
app.directive("treeBranch", function($compile) {
return {
restrict: "E",
replace: true,
scope: {
b: "=src"
},
template: "<li class='{{b.class_li}}'>{{b.name}}</li>",
controller: function($scope) {
var has_children = angular.isArray($scope.b.children);
$scope.b.class_li = has_children ? "li-node" : "li-leaf";
},
link: function(scope, element, attrs) {
var has_children = angular.isArray(scope.b.children);
if (has_children) {
element.append('<tree-view src="b"></tree-view>');
$compile(element.contents())(scope);
}
element.on("click", function(event) {
console.log("click|" + scope.b.name);
event.stopPropagation();
if (has_children) {
element.toggleClass("ul-collapsed");
}
});
}
};
});
app.service("treeService", function() {
var nodes = {
children: [
{ name: "Node_1",
children: [
{ name: "Node_1.1",
children: [{ name: "Leaf_1" }, { name: "Leaf_2" }] },
{ name: "NodeLazy_1.2", }] },
{ name: "NodeLazy_2", }]
};
return {
Nodes : nodes
};
});
app.controller("ctrl", function($scope, treeService) {
$scope.nodes = treeService.Nodes;
});
Angular Material Tree view Checkbox is working fine when i try to collapse/expand first time and checked whether on Parent Node or Child Node, but it is not working when i try to Checked the different node (i.e.Child Node) on second time. I use custom directive to achieve Tree View functionality. Below is my Code.
Custom Directive
NFSModule.directive('nfsTree', function () {
return {
restrict: 'E',
replace: true,
scope: {
tree: '=source',
},
template: '<nfs-node ng-repeat="c in tree.children" cnode="c"></nfs-node>'
};
});
NFSModule.directive('nfsNode', function ($compile) {
return {
restrict: 'E',
replace: true,
scope:{
node: '=cnode'
},
template: '<li><span ng-click="toggleVisibility(node)"> {{ ( node.childrenVisibility && node.children.length ) ? "+" : "-" }}</span>' +
'<nfs-tree-checkbox ng-model="node.checked" ng-click="checkNode(node)"><span ng-bind="node.name"></span></nfs-tree-checkbox></li>', // HTML for a single node.
link: function (scope, element) {
/*
* Here we are checking that if current node has children then compiling/rendering children.
* */
if (scope.node && scope.node.children && scope.node.children.length > 0) {
scope.node.childrenVisibility = true;
var childNode = $compile('<ul ng-if="!node.childrenVisibility"><nfs-tree source="node" ></nfs-tree></ul>')(scope);
element.append(childNode);
} else {
scope.node.childrenVisibility = false;
}
},
controller: ["$scope", function ($scope) {
// This function is for just toggle the visibility of children
$scope.toggleVisibility = function (node) {
if (node.children) {
node.childrenVisibility = !node.childrenVisibility;
}
};
// Here We are marking check/un-check all the nodes.
$scope.checkNode = function (selectednode) {
if (selectednode.checked != undefined) {
var has_child = angular.isArray(selectednode.children);
if (has_child = true)
{
checkChildren(selectednode);
}
}
function checkChildren(c) {
angular.forEach(c.children, function (c) {
c.checked = selectednode.checked;
});
}
};
}]
};
});
NFSModule.directive('nfsTreeCheckbox', function () {
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
name: '#',
ngModel: '=',
ngClick: '=',
ngDisabled: '=',
label: '#'
},
template: function (elem, attr) {
return '<md-input-container class="md-inline" style="height:10px !important; margin-top:-5px; !important; margin-left:5px !important;">' +
'<md-checkbox ng-model="ngModel" ng-click="ngClick" ng-disabled="ngDisabled" aria-label="{{label}}" class="md-primary">' +
'<ng-transclude></ng-transclude>' +
' </md-checkbox>' +
'</md-input-container>'
}
};
});
$SCOPE
$scope.location = {
children:
[
{
name: 'Europe',
children: [
{
name: 'Italy',
children: [
{
name: 'Rome'
},
{ name: 'Milan' }
]
},
{ name: 'Spain' }
]
},
{
name: 'South America',
children: [
{ name: 'Brasil' },
{ name: 'Peru' }
]
}
]
};
HTML
<ul >
<nfs-tree source="location"></nfs-tree>
</ul>
I am trying to make bar chart in angular .I am able to make in jquery (using highchart.js file).This is link which I am able to make in jquery code
http://plnkr.co/edit/SD1iSTBk8o1xi3unxKeE?p=preview .I am getting the correct output.But the same thing I need to show using angularjs using directive .So I try to make directive .My issue is how I will pass my parameter in directive
here is my angular code.
http://plnkr.co/edit/LwonlkbCy3asHXyToVMz?p=catalogue
// Code goes here
angular.module('contactsApp', ['ionic'])
.controller('MainCtrl', function($scope) {
}).directive('chartTest',function(){
return {
restrict: 'E',
scope:{
},
link :function(scope, element, attrs){
element.highcharts({
chart: {
type: 'bar'
},
title: {
text: chart_title
},
xAxis: {
categories: xAxisarry
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: names[0],
data: janeData
}, {
name: names[1],
data: joneData
}]
});
}
}
});
I want it look like same as in jquery ? can we pass variable in directive using scope?
You need to pass the parameters from the isolated scope of your directive, and then inside your directive you need to use $ on directive element to make highcharts method available.
Markup
<chart-test chart-title="chartTitle" x-axisarry="xAxisarry"
y-axis="yAxis" json-data="janeData" names="names"></chart-test>
Controller
.controller('MainCtrl', function($scope) {
$scope.chartTitle = "";
$scope.xAxisarry = ['Apples', 'Bananas', 'Oranges'];
$scope.yAxis = 'Fruit eaten';
$scope.data = {
jane: [1, 0, 4],
jone: [5, 7, 3]
};
$scope.names = ["jane", "jone"];
})
Directive
.directive('chartTest', function() {
return {
restrict: 'E',
scope: {
chartTitle: '=',
xAxisarry: '=',
yAxis: '=',
jsonData: '=',
names: '='
},
link: function(scope, element, attrs) {
$(element).highcharts({
chart: {
type: 'bar'
},
title: {
text: scope.chartTitle
},
xAxis: {
categories: scope.xAxisarry
},
yAxis: {
title: {text: 'Fruit eaten'}
},
series: [{
name: scope.names[0],
data: scope.jsonData['jane']
}, {
name: scope.names[1],
data: scope.jsonData['jone']
}]
});
}
}
});
Working Plunkr