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.
Related
I didn't updated any of my .js files, yet my nested views are not displaying at all (even though they were before) and throw this error in console.
Why is it throwing the error and not displaying my nested views as it was originally?
angular version: 1.6.0-rc.0 (.min.js)
angular-ui-router version: v0.3.1 (.min.js)
app.js
'use strict';
var app = angular.module('app', ['ui.router','controllers','filters']);
app.config(function($stateProvider, $urlRouterProvider)
{
$urlRouterProvider.otherwise('/');
// Initialize states
var homeState =
{
name:'home',
url:'/',
views:
{
'' : {templateUrl: 'partials/home.html'}, // App template that organizes the layout of the panels
'panel#home' : {templateUrl: 'partials/panel.html'} // Reusable panel template for multiple panels within app
}
};
// Register states
$stateProvider.state(homeState);
});
controller.js
'use strict';
var controllers = angular.module("controllers", []);
// Initialize controllers
controllers.controller('panelEvaluateController',function($scope)
{
$scope.header = 'Solve an Equation';
$scope.button = '<button>Solve</button>';
$scope.body = 'partials/panels/evaluate.html';
$scope.tooltip = 'Help';
});
controllers.controller('panelConvertController',function($scope)
{
$scope.header = 'Convert an Integer';
$scope.button = '<button>Convert</button>';
$scope.body = 'partials/panels/convert.html';
$scope.tooltip = 'Help convert';
$scope.bases =
[
{ value : 2 , name : 'Binary'},
{ value : 8 , name : 'Octal'},
{ value : 10 , name : 'Decimal'},
{ value : 16 , name : 'Hex'}
];
$scope.base =
[
{selected : 2},
{selected : 10}
];
});
controllers.controller('panelSolutionController',function($scope)
{
$scope.header = 'Solution';
$scope.button = '<div class="row"><div class="col-sm-6"><button><span class="glyphicon glyphicon-chevron-left"></span></button></div><div class="col-sm-6"><button><span class="glyphicon glyphicon-chevron-right"></span></button></div></div>';
$scope.body = 'templates/panels/solution.html';
$scope.tooltip = 'solve';
});
index.html
<!DOCTYPE html>
<html data-ng-app="app" lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Show Your Work</title>
<link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/css/specific.css">
</head>
<body>
<div id="header">
<div class="header-color-line"></div>
<div id="logo">Show Your Work</div>
</div>
<div class="row" id="view-container">
<div data-ui-view=""></div> <!-- displays home.html -->
</div>
<script type="text/javascript" src="vendor/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="vendor/angular/angular.js"></script>
<script type="text/javascript" src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="resources/js/app.js"></script>
<script type="text/javascript" src="resources/js/controllers.js"></script>
<script type="text/javascript" src="resources/js/filters.js"></script>
</body>
</html>
filters.js
'use strict';
var filters = angular.module("filters", []);
filters.filter('trusted', function($sce)
{
return function(val)
{
return $sce.trustAsHtml(val);
};
});
You need to update the ui-router version which should match with the angular version, Now the versions you have mentioned does not match.
<script type="text/javascript" src="vendor/angular/angular.js"></script>
<script type="text/javascript" src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
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.
I am trying to set up a simple login screen. Why is this coming back blank?
index.html
<!DOCTYPE html>
<html >
<head>
<title>Joe Kleckler</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-app="kleckDev">
<div ui-view></div>
</body>
<script src="./app/angular.min.js"></script>
<script src="./app/ui.router.js"></script>
<script src="./app/kleckDev.js"></script>
<script src="./app/controllers/loginController.js"></script>
<script src="./app/controllers/realmController.js"></script>
<!--<script src="./app/bootstrap.min.js"></script>-->
<script type="text/javascript">
console.log("angular object", angular);
</script>
</html>
kleckDev.js
var app = angular.module('kleckDev', ["ui.router"]);
app.config(function($stateProvider) {
$stateProvider
.state("login", {
url: "/",
controller: "LoginController",
templateUrl: "views/login.html"
})
.state("realm", {
url:"/realm",
controller: "RealmController",
templateUrl: "views/realm.html"
})
});
loginController.js
app.controller("LoginController", ['$scope', '$http', '$state', function($scope, $http, $state) {
$scope.registration = {
firstName: undefined,
lastName: undefined,
email: undefined,
username: undefined,
password: undefined,
checkPass: undefined
}
$scope.login = {
username: undefined,
password: undefined
}
$scope.registerUser = function() {
var data = {
firstName: $scope.registration.firstName,
lastName: $scope.registration.lastName,
email: $scope.registration.email,
username : $scope.registration.username,
password : $scope.registration.password,
checkPass : $scope.registration.checkPass,
access: 0
}
$http.post("php/register.php", data).success(function(response) {
console.log(response);
localStorage.setItem("user", JSON.stringify({user: response}));
$state.go("realm");
}).error(function(error) {
console.log(error);
});
};
$scope.loginUser = function() {
var data = {
username: $scope.login.username,
password: $scope.login.password
}
$http.post("php/login.php", data).success(function(response) {
console.log(response);
localStorage.setItem("user", JSON.stringify({user: response[0].username}));
$state.go("realm");
}).error(function(error) {
console.log(error);
});
}
}])
It was showing up less than an hour ago, and I tried to add something, but when I removed it cuz it broke stuff nothing will show now.
Your index.html file is already inside the app directory. Nothing works because it doesn't load angular or any of the specified files.
remove the ./app directory from all your script sources.
<script src="angular.min.js"></script>
<script src=".ui.router.js"></script>
<script src="controllers/loginController.js"></script>
<script src="controllers/realmController.js"></script>
<script src="kleckDev.js"></script>
And load the kleckDev.js file last.
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();
});
}
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
});