I'm using Basic ComboTree from jeasyui.com
index.js
$http.get("GetDataForTree")
.success(function (response) {
$scope.Mydata= response;
SpinStop();
});
in cshtml
<input class="easyui-combotree"
data-options="url:'tree_data1.json',method:'get',required:true" style="width:200px;">
how do i bind $scope.Mydata inside data-options ?
Here is the working example. Hope this will solve your problem...
create a service to get the remote data
app.service('treeData', ['$http',function($http){
this.getData = function(){
return $http.get('tree_data1.json');
}
}]);
tree_data1.json data
[{
"id":1,
"text":"My Documents",
"children":[{
"id":11,
"text":"Photos",
"state":"closed",
"children":[{
"id":111,
"text":"Friend"
},{
"id":112,
"text":"Wife"
},{
"id":113,
"text":"Company"
}]
},{
"id":12,
"text":"Program Files",
"children":[{
"id":121,
"text":"Intel"
},{
"id":122,
"text":"Java",
"attributes":{
"p1":"Custom Attribute1",
"p2":"Custom Attribute2"
}
},{
"id":123,
"text":"Microsoft Office"
},{
"id":124,
"text":"Games",
"checked":true
}]
},{
"id":13,
"text":"index.html"
},{
"id":14,
"text":"about.html"
},{
"id":15,
"text":"welcome.html"
}]
}]
create a directive say "comboTreeDirective" and add the directive as an attribute to comboe tree element
app.directive('comboTreeDirective', function(treeData){
return {
restrict: 'A',
link: function($scope, $elem, $attr){
treeData.getData().success(function(response){
$elem.combotree('loadData', response);
});
}
}
});
use the directive as shown below
<input class="easyui-combotree" data-options="required:true" style="width:200px;" combo-tree-directive>
Below is the complete working example
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>Basic ComboTree - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<link rel="stylesheet" type="text/css" href="vendor/demo.css">
<script type="text/javascript" src="vendor/jquery.min.js"></script>
<script type="text/javascript" src="vendor/jquery.easyui.min.js"></script>
<script type="text/javascript" src="vendor/angular/angular.js"></script>
</head>
<body ng-controller="comboTreeCtrl">
<h2>Basic ComboTree</h2>
<p>Click the right arrow button to show the tree panel.</p>
<div style="margin:20px 0"></div>
<input class="easyui-combotree" data-options="required:true" style="width:200px;" combo-tree-directive>
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.controller('comboTreeCtrl', function ($scope, $http){
});
app.service('treeData', ['$http',function($http){
this.getData = function(){
return $http.get('tree_data1.json');
}
}]);
app.directive('comboTreeDirective', function(treeData){
return {
restrict: 'A',
link: function($scope, $elem, $attr){
treeData.getData().success(function(response){
$elem.combotree('loadData', response);
});
}
}
});
</script>
</body>
</html>
You could create a directive [set the directive as attribute for input element]and within the directive set the data using loadData when the promise is resolved.
<input class="easyui-combotree" my-combotree
data-options="url:'tree_data1.json',method:'get',required:true" style="width:200px;">
//Within myCombotree directive link function
link: function link(scope, element, attrs) {
$http.get("GetDataForTree")
.success(function (response) {
//$scope.Mydata= response;
element.combotree('loadData', response);
SpinStop();
});
}
Related
var erroMessage = "<br/>For<br/><a ng-click='RR.hiphen();'><strong>Visit</strong></a>");
$scope.Error = {
alertType:"error",
title: "",
message: GlobalObjectErrorMessage + erroMessage,
};
I am getting a simple without the ng-click like below:
<a><strong>Visit</strong></a>
You have to compile it using $compile because it is not a part of dom.
<dir content="{{ erroMessage }} ">
errorMessage variable should be part of $scope so it can be access in html view,then add directive to your controller or any where else to convert content to html by compiling it.
.directive('dir', function ($compile, $parse) {
return {
restrict: 'E',
link: function (scope, element, attr) {
scope.$watch(attr.content, function () {
element.html($parse(attr.content)(scope));
$compile(element.contents())(scope);
}, true);
}
}
})
As i dont have your complete js code i arrange with my data and put an alert in click of that function call
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div dynamic="erroMessage "></div>
</body>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.erroMessage = "<br/>For<br/><a ng-click='hey();'><strong>Visit</strong></a>";
$scope.Error = {
alertType:"error",
title: "",
message: "hey" + $scope.erroMessage ,
};
$scope.hey=function(){
alert("i am coming from your vist click");
}
});
app.directive('dynamic', function ($compile) {
return {
restrict: 'A',
replace: true,
link: function (scope, ele, attrs) {
scope.$watch(attrs.dynamic, function(erroMessage ) {
ele.html(erroMessage );
$compile(ele.contents())(scope);
});
}
};
});
</script>
</html>
I'm using Angular 1.5 Component. I could not figure out how to get the data via Resolve.
Could you please shed some light?
Plunker: https://plnkr.co/edit/2wv4YWn8YQvow6FDcGV0
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="https://code.angularjs.org/1.5.7/angular.js"></script>
<script src="https://code.angularjs.org/1.5.7/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body>
<ng-view></ng-view>
</body>
</html>
app.js
(function () {
angular
.module("app", ['ngRoute'])
.config(function($routeProvider){
$routeProvider
.when("/home", {
template: `<main
promise-followers="$resolve.promiseFollowers"></main>`,
resolve: {promiseFollowers: function ($http) {
$http.get("https://api.github.com/users/octocat/followers")
.then(function(result) {
return result.data;
}, function(result) {
console.log(result);
});
}
},
})
.otherwise({ redirectTo: "/home" } );
})
.component("main", {
template: `<h3>Demo Angular 1.5 Resolver</h3>
<p>Promise Data from Controller :
<select ng-model="$ctrl.selected"
ng-options="option.id as option.login for option in $ctrl.followers"></select>
</p>
<p>Promise Data from Resolve :
<select ng-model="$ctrl.selected"
ng-options="option.id as option.login for option in $ctrl.promiseFollowers"></select>
<span class="label label-danger">Not Working</span>
</p>
<h4>Regular Selector Selected: {{$ctrl.selected}}</h4>`,
controller: function($http){
var self = this;
// This is just testing to to make sure api is working.
$http.get("https://api.github.com/users/octocat/followers")
.then(function(result) {
self.followers = result.data;
}, function(result) {
console.log(result);
});
self.$onInit = function () {
console.log(self.promiseFollowers);
}
}
});
})();
You had forgot to return a promise from your promiseFollowers promise.
promiseFollowers: function ($http) {
return $http.get(...){
}
}
And there after you also need to define a bindings option to retrieve a value passed from resolve
bindings: {
promiseFollowers: '='
},
Demo Plunkr
https://stackoverflow.com/a/18019915/6524138 do refer this should help if the above solution does not work.
Jist: "Inject resolve to the controller" should fix your issue.
In my project I have included: JQuery, JSTree, Angular and NgJsTree. Whenever I update my treeData model, the data change is not reflected in the tree.
tcwsApp.service('explorerService', ['$http', '$log', '$timeout',
function($http, $log, $timeout) {
var service = this;
service.treeData = {
rootNodes: [{
"text": "Initial node"
}]
};
return ({
getTreeData: getTreeData,
initService: initService
});
function initService() {
getRootNodes();
}
function getTreeData() {
return service.treeData;
}
function getRootNodes() {
var request = $http.get("api/explorer");
request.then(function(response) {
$log.debug(response);
service.treeData.rootNodes = response.data.list;
}, function(response) {
$log.error(response);
});
}
}
]);
tcwsApp.controller('explorerController', ['$log', 'explorerService',
function($log, explorerService) {
var explorer = this;
explorerService.initService();
explorer.treeData = explorerService.getTreeData();
explorer.applyChanges = function() {
return true;
};
explorer.treeConfig = {
core: {
multiple: false,
animation: true,
error: function(error) {
$log.error('treeCtrl: error from js tree - ' + angular.toJson(error));
},
check_callback: true,
worker: true
},
version: 1,
plugins: ['types', 'checkbox']
};
}
]);
tcwsApp.directive('explorerTree', function() {
return {
templateUrl: 'app/template/explorer_tree.html'
};
});
<!DOCTYPE HTML>
<html ng-app="tcwsApp">
<head>
<meta charset="utf-8">
<title>TCWS</title>
<link rel="stylesheet" href="lib/jstree/themes/default/style.min.css" />
<link rel="stylesheet" href="lib/lht-bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="lib/lht-bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="app/tcws_app.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="lib/angular-messages.js"></script>
<script src="lib/jstree/jstree.js"></script>
<script src="lib/jstree/ngJsTree.js"></script>
<script src="lib/lht-bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<tcws-app>
<!-- directive contents pasted -->
<explorer-tree>
<div class="col-md-4" ng-controller="explorerController as explorer">
<div js-tree="explorer.treeConfig" ng-model="explorer.treeData.rootNodes" should-apply="explorer.applyChanges()" tree-events="ready:readyCB;create_node:createNodeCB" tree="explorer.treeInstance">
{{explorer.treeData.rootNodes}}
</div>
</explorer-tree>
</tcws-app>
<script src="app/tcws_app.js"></script>
<script src="app/controller/explorer_tree.js"></script>
</body>
</html>
This displays the initial node - however the debug output via {{explorer.treeData.rootNodes}} is updated correctly after the http.get request finishes.
Resulting web page
Jstree has 2 json formats:
default: node w/ children
alternative: node w/ parent
Automatic updates on model change are only possible with the alternative format as stated here: Github Issue.
I'm trying to save tags with local storage. It doesn't work and I don't know what's going on with it.
app.js:
var app = angular.module('plunker', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.tags = [
{ text: 'Tag1' },
{ text: 'Tag2' },
{ text: 'Tag3' }
];
});
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.15"></script>
<script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<tags-input ng-model="tags"></tags-input>
<p>Model: {{tags}}</p>
</body>
</html>
I'm attempting to do this with localStorage to have the tags stay there when the user leaves the app, goes back to another page, or just refreshes it.
window.localStorage['name'] = {{tags}};
Link to doc:
http://learn.ionicframework.com/formulas/localstorage/
You need to save tags model to localStorage and update it on every collection change: remove/add tags. It is convenient to create helper service for this:
var app = angular.module('plunker', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http, storage) {
$scope.tags = storage.get('tags') || [
{ text: 'Tag1' },
{ text: 'Tag2' },
{ text: 'Tag3' }
];
$scope.$watchCollection('tags', function(tags) {
storage.set('tags', tags);
});
});
app.factory('storage', function() {
return {
get: function(key) {
return JSON.parse(localStorage[key] || 'null');
},
set: function(key, value) {
window.localStorage[key] = JSON.stringify(value);
}
};
});
Note, how in controller code you first check stored items and if not available fallback to default tags:
$scope.tags = storage.get('tags') || [
{ text: 'Tag1' },
{ text: 'Tag2' },
{ text: 'Tag3' }
];
Demo: http://plnkr.co/edit/jgJNADUuTsgbTNvK16Jg?p=preview
This code will read the tags from localStorage, put it inside of the controller
$scope.tags = JSON.parse(window.localStorage['tags'] || '[]');
This code will save the tags into localStorage:
window.localStorage['tags'] = JSON.stringify($scope.tags);
For example, you controller will be like this:
app.controller('MainCtrl', function($scope, $http) {
$scope.tags = JSON.parse(window.localStorage['tags'] || '[]');
//Another methods
});
edit: Modified the code as per stevuu's suggestion as well as added a plunkr to here
I'm currently attempting to have a child directive call a method(resolve) through another directive all the way up to a parent directive but I'm having difficulties identifying the problem with my approach.
The problem right now seems to be that although resolve() does get called as expected on click, selected remains undefined.
the html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Angular: directive using & - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<style type='text/css'>
</style>
</head>
<body ng-app="myApp">
<div grand-parent>
<span>selected: {{text}}</span>
<div parent resolve="resolve"></div>
</div>
</body>
</html>
And the js:
var myApp = angular.module('myApp',[]);
myApp.directive('grandParent', function() {
return {
scope:{
resolve: "&"
},
link: function($scope, $element) {
$scope.resolve = function(selected){
$scope.text = selected
}
}
};
});
myApp.directive('parent', function(){
return{
scope: {
resolve: "&"
},
template: "<div child resolve='resolve'></div>"
};
});
myApp.directive('child', function() {
return {
scope: {
resolve: "&"
},
template: "<div>Click me!</div>",
link: function($scope, $element) {
$element.on("click", function(){
$scope.$apply(function(){
$scope.resolve({selected: "Yahoo!!"});
});
});
}
};
});
resolve: "&" is a mapping. So here:
myApp.directive('grandParent', function() {
return {
scope:{
resolve: "&"
},
link: function($scope, $element) {
$scope.resolve = function(selected){
$scope.text = selected
}
}
};
});
you are trying to map "resolve" to ... nothing, because "grandParent" doesn't have any attr named "resolve".
If you want to share some staff betweens directives you should do something like that:
view
<div data-grand-parent resolve="resolved()">
<div data-parent ></div>
</div>
Directives
var app = angular.module('test');
app.directive('grandParent', function() {
return {
scope : {
resolve : "&" // in view we defined resolve attr
// with "resolve()" value, so now resolve=resolved()
// in grandParent scope too.
},
controller: function($scope){
this.getResolve = function(){
return $scope.resolve;
};
}
};
});
app.directive('parent', function() {
return {
require: "^grandParent",
link: function(scope, element, attr, grandParentCtrl){
grandParentCtrl.getResolve()();
},
template : ""
};
});
controller
angular.module('desktop')
.controller('MainCtrl', function ($scope, mocks) {
$scope.resolved = function(){
console.log("calling $scope.resolved() ...");
};
});
output
calling $scope.resolved() ...
So, how does it work?
We defined resolved function in our controller, then we sign this function to attr "resolve" in grandParent directive. Thx to resolve : "&" we could mapped that resolved() function to "resolve" property in grandParent scope. At the end we inject grandParent to other directives. That's all.
I recommend you to read angularJs by Brad Green, Shyam Seshadri. it's not the best book but could be worse and it's free. You can find very good tutorial too on http://www.egghead.io/
ps. Sorry for my english ;/