I'm using $ionicLoading for loading the news page, if no news found then this will run on my template: <div ng-show="!news.length" class="empty"> Nothing to show ! </div>
Problem: The empty div (Nothing to show !) is showing on the loading time, so if the news come then that div will hide. now I need to display that message after loading completed if no article found.
My Controller:
.controller('detailsCtrl', function ($scope, $ionicHistory, $stateParams, $http, $ionicLoading, $ionicFilterBar, $rootScope) {
$scope.init = function () {
var id = $stateParams.id;
$ionicLoading.show({
template: '<ion-spinner icon = "ripple" class="spinner-light"></ion-spinner>',
duration: 20000
});
$http.get('http://localhost/json/article_details.php?id=' + id).then(function (output) {
$ionicLoading.hide();
$scope.news = output.data;
console.log(angular.toJson(output.data));
});
};
});
My HTML Template:
<ion-view ng-init="init()">
<!-- If news not found -->
<div ng-show="!news.length" class="empty"> Nothing to show ! </div>
<!-- If news found -->
<div ng-repeat="news in news">
...
There is a simple solution. You can create a boolean variable on the scope that is set to true in the callback of your $http call. You add this as a condition to your Nothing to show message.
Controller
.controller('detailsCtrl', function ($scope, $ionicHistory, $stateParams, $http, $ionicLoading, $ionicFilterBar, $rootScope) {
$scope.isLoadingComplete = false;
$scope.init = function () {
var id = $stateParams.id;
$ionicLoading.show({
template: '<ion-spinner icon = "ripple" class="spinner-light"></ion-spinner>',
duration: 20000
});
$http.get('http://localhost/json/article_details.php?id=' + id).then(function (output) {
$ionicLoading.hide();
$scope.isLoadingComplete = true;
$scope.news = output.data;
console.log(angular.toJson(output.data));
});
};
});
Template
<ion-view ng-init="init()">
<!-- If news not found -->
<div ng-show="isLoadingComplete && !news.length" class="empty"> Nothing to show ! </div>
<!-- If news found -->
<div ng-repeat="news in news">
...
Related
I want to make a sidebar with list item that can be dynamically changed based on the settings page.
My app request settings.json via factory() and then called it in a controller. The controller will be used by settings.html (ngView) and sidebar.html (ngInclude).
The json will return Boolean value that also can be changed on setting page that contain checkbox which return true if check and false if not checked. I use ngShow on the sidebar to display/hide the list items.
How can I made the sidebar to reflect the changes as I tick the checkbox?
settings.factory.js
var settingsFactory = angular.module('settingsFactory', []);
settingsFactory.factory('SettingsFilterFactory', ['$http', function ($http) {
var settingsFactory = {};
settingsFactory.getSettings = function () {
return $http.get('app/data/settings.json');
};
return settingsFactory;
}]);
controller
var settingsControllers = angular.module('settingsControllers', ['settingsFactory']);
settingsControllers.controller('SettingsFilterController', ['$scope', '$http', 'SettingsFilterFactory', function ($scope, $http, SettingsFilterFactory) {
$scope.settings;
$scope.status;
getSettings();
function getSettings() {
SettingsFilterFactory.getSettings()
.then(function (response) {
$scope.settings = response.data;
}, function (error) {
$scope.status = 'Unable to load: ' + error.message;
});
}
}]);
app.js
var app = angular.module('app', ['ngRoute', 'settingsControllers']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/settings', {
title: 'Settings',
templateUrl: 'app/components/settings/settings.html',
controller: 'SettingsFilterController'
}).
otherwise({
redirectTo: '/home'
});
}]);
My index.html is something like this:
...
<body>
<section class="sidebar">
<div ng-include="'app/components/sidebar/sidebar.html'"></div>
</section>
<section class="content">
<div ng-view></div>
</section>
</body>
...
sidebar.html
<ul class="sidebar-menu" ng-controller="SettingsFilterController">
<li ng-show"settings.hiddenMenu">This is secret link</li>
</ul>
settings.html
...
<div class="checkbox">
<input type="checkbox" ng-model="settings.hiddenMenu" ng-true-value=true ng-false-value=false> Check this to show hidden menu
</div>
...
Try something like this (untested):
settings.factory.js
var settingsFactory = angular.module('settingsFactory', []);
settingsFactory.factory('SettingsFilterFactory', ['$http', function ($http) {
var settingsFactory = {};
settingsFactory.getSettings = function () {
return $http.get('app/data/settings.json');
};
settingsFactory.hiddenMenu= true;
settingsFactory.someOtherSetting = {};
return settingsFactory;
}]);
sidebar controller
settingsControllers.controller('SidebarController', ['$scope', '$http', 'SettingsFilterFactory', function ($scope, $http, SettingsFilterFactory) {
//do this in each controller, so that the factory becomes a property of $scope and can be seen in the HTML
$scope.settingsFactory = SettingsFilterFactory;
}
sidebar.html
<ul class="sidebar-menu" ng-controller="SidebarController">
<li ng-show"settingsFactory.hiddenMenu">This is secret link</li>
</ul>
settings.html
...
<div class="checkbox">
<input type="checkbox" ng-model="settingsFactory.hiddenMenu" ng-true-value=true ng-false-value=false> Check this to show hidden menu
</div>
...
Essentially, you are binding the settingsFactory object which is a singleton to each $scope that is provided by each controller. Each controller is able to change the property on the factory object, which is then visible in all other controllers that have injected this object.
I am creating an Angular application in ASP.NET with partial templates. When I select the menu, and click "Employees", a controller calls a webservice and returns the correct JSON data, and I store it in $scope.message. I've displayed $scope.message on the screen, and everything works.
However, I want to feed $scope.message as data source to a D3plus boxplot graph stored in a partial template called employees.html. It does not seem to be working. Perhaps I am making an obvious mistake and would greatly appreciate the community's help. Thank you! Here is mu code:
Webform1.aspx (webform):
...
<body onload="loadPikaday()" data-ng-app="Demo">
<%-- Header --%>
<div id="topBanner" class="topBanner">
<div id="menu" class="menu">
Report from:
<input id="startDate" size="6" type="text" data-ng-model="startDate" /> To
<input id="endDate" size="6" type="text" data-ng-model="endDate" />
<%-- Dropdown menu --%>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">MENU</button>
<div id="myDropdown" class="dropdown-content">
Cases
Protocols
Employees
</div>
</div>
</div>
</div>
<%-- Where html is injected--%>
<div data-ng-view=""></div>
</body>
...
myScript.js (Angular module):
/// <reference path="angular.min.js" />
var app = angular.module("Demo", ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/cases', { // Root: initialize with cases
templateUrl: 'templates/cases.html',
controller: 'casesController'
})
.when('/protocols', { // Root: initialize with cases
templateUrl: 'templates/protocols.html',
controller: 'protocolsController'
})
.when('/employees', {
templateUrl: 'templates/employees.html',
controller: 'employeesController'
})
})
.controller('casesController', function ($scope) {
$scope.message = "Cases!";
})
.controller('protocolsController', function ($scope) {
$scope.message = "This is the protocols page!";
})
.controller('employeesController', function ($scope, $http) {
$http.get('dataWebService.asmx/getTotalForDateIntervalEmployees', {
params: { startDate: '2015-01-01', endDate: '2016-08-01' }
})
.then(function (response) {
$scope.message = response.data;
})
});
employees.html (injected partial template):
<!doctype html>
<meta charset="utf-8">
<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>
<div id="viz"></div>
<script>
var data = {{message}};
var visualization = d3plus.viz()
.container("#viz")
.data(data)
.type("box")
.id("name")
.x("building")
.y("total")
.time(false)
.ui([{
"label": "Visualization Type",
"method": "type",
"value": ["scatter", "box"]
}])
.draw()
</script>
Here is a simple example using a directive...
var app = angular.module('app', []);
app.controller('AppCtrl', function($scope, $http) {
$scope.data = [];
$http.get('/data').then(function(data) {
$scope.data = data.data;
});
});
app.directive('chart', function() {
return {
restrict: 'EA',
scope: {
data: '=',
},
link: function(scope, elem, atts) {
var svg = d3.select(elem[0]).append('svg'),
chart = svg.append('g');
scope.$watch('data', function(data) {
chart.selectAll('*').remove();
if (data.length) {
updateChartData(data);
}
});
function updateChartData(data) {
// add all your d3 code here...
}
}
};
});
Then you can bind the data with something like
<chart data="data"></chart>
You're going about this all wrong, I'm afraid to say. You should not have javascript in your template and then use angular to inject values into that script. Angular is based on the MVC principle and you are mixing up controller and view here. I'd strongly suggest using an angular directive to wrap your d3 functionality: like for example this: https://github.com/mariohmol/angular-d3plus. Simple principle here: never, ever have js code in templates in Angular.
I have a controller as main controller and a its child controller. I want to execute first the main controller and then after its child controller.
I am collecting some userdata and want to keep it in $rootScope so that i could access it within the whole application.
How could i do this ?
<body ng-app="angularApp">
<div ng-controller="MainAppController">
<div ng-controller="childController">
Here i want to access data from "MainAppController" stored in $rootScope
But problem is "childController" runs before "MainAppController"
</div>
</div>
</body>
Here is the angular code
angular.module('MyApp').controller('MainAppController', function($rootScope, service){
$rootScope.userData = [];
service.getUserData().success(function(userDetails){
$rootScope.userData = userDetails;
});
});
angular.module('MyApp').controller('childController', function($scope, $rootScope){
$scope.userInfo = $rootScope.userData;
//Here $scope.userInfo is null because $rootScope.userData gets assigned to $scope.userInfo in this controller before userDetails gets assigned to $rootScope.userData in MainAppController controller.
I want that untill "$rootScope.userData = userDetails;" is not finished , "$scope.userInfo = $rootScope.userData;" must not run.
How can i do this ?
});
There are two ways i know you can do this.
1 way ::
Use $rootScope.userData directly in html and when your parent controller will run $rootScope.userData will get updated and by dual binding feature of angular, your view will get updated accordingly
Code::
//angularjs Code
var app = angular.module('MyApp', []);
app.controller('MainController', function($rootScope, $timeout) {
$rootScope.userData = {};
$timeout(function() {
$rootScope.userData = {name:'myName'};
}, 3000);
});
app.controller('childController', function() {
});
//html code
<div ng-app="MyApp" ng-controller="MainController">
<div ng-controller="childController">
{{userData.name}}
</div>
</div>
2 way::
You can attach $watch on $rootScope.userData in childController so when $rootScope.userData will get updated $watch will run and inside $watch you can update your $scope variable
Code::
//Angularjs Code
var app = angular.module('MyApp', []);
app.controller('MainController', function($rootScope, $timeout) {
$rootScope.userData = {};
$timeout(function() {
$rootScope.userData = {name:'myName'};
}, 2000);
});
app.controller('childController', function($scope, $rootScope) {
$scope.$watch(function(){
return $rootScope.userData;
}, function(){
$scope.userInfo = $rootScope.userData;
});
});
//HTML Code
<div ng-app="MyApp" ng-controller="MainController">
<div ng-controller="childController">
{{userInfo.name}}
</div>
</div>
I have a ng-repeat and I am trying to add a modal that passes the same scope variable to the modal window. I am able to get the modal window to open but the scope value from ng-repeat is not showing inside the modal. Hopefully my code explains better. This is what I have so far:
<div ng-controller="CustomerController">
<div ng-repeat="customer in customers">
<button class="btn btn-default" ng-click="open()">{{ customer.name }}</button>
<!--MODAL WINDOW-->
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>The Customer Name is: {{ customer.name }}</h3>
</div>
<div class="modal-body">
This is where the Customer Details Goes<br />
{{ customer.details }}
</div>
<div class="modal-footer">
</div>
</script>
</div>
</div>
The controller:
app.controller('CustomerController', function($scope, $timeout, $modal, $log, customerServices) {
$scope.customers= customerServices.getCustomers();
// MODAL WINDOW
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
});
};
});
The above opens the modal window. However, the customer details such as {{ customer.name }} from the ng-repeat is not passed into the modal window. Have I got something wrong with the Controller?
I am trying to create this after looking at the Angular Bootrap UI example here: http://angular-ui.github.io/bootstrap/
EDIT:
Here is a jsfiddle sample: http://jsfiddle.net/Alien_time/8s9ss/3/
I've updated your fiddle and below code as well. I hope that will help.
Regards
var app = angular.module('app', ['ui.bootstrap']);
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, customer)
{
$scope.customer = customer;
});
app.controller('CustomerController', function($scope, $timeout, $modal, $log) {
$scope.customers = [
{
name: 'Ricky',
details: 'Some Details for Ricky',
},
{
name: 'Dicky',
details: 'Some Dicky Details',
},
{
name: 'Nicky',
details: 'Some Nicky Details',
}
];
// MODAL WINDOW
$scope.open = function (_customer) {
var modalInstance = $modal.open({
controller: "ModalInstanceCtrl",
templateUrl: 'myModalContent.html',
resolve: {
customer: function()
{
return _customer;
}
}
});
};
});
This is how I setup my modals for handleing items that I ng-repeat over and want to edit. I suggest setting it up to work with a different controller, because then you can use DI to inject the resolved item to the child scope.
$scope.openModal = function(item)
// This sets up some of the options I want the modal to open with
var options = {}
angular.extend(options, {
templateUrl: '/views/userItems/form.html',
controller: 'ItemEditController',
resolve: {
// I resolve a copy of the so it dont mess up the original if they cancel
item: function() { return angular.copy(item); }
}
});
$modal.open(options).result.then(function(updatedItem) {
// after the user saves the edits to the item it gets passed back in the then function
if(updatedItem) {
// this is a service i have to deal with talking to my db
modelService.editItem(updatedItem).then(function(result) {
// get the result back, error check then update the scope
if(result.reason) {
$scope.addAlert({type: 'error', title: 'Application Error', msg: result.reason});
} else {
angular.extend(vital, result);
$scope.addAlert({type: 'success', msg: 'Successfully updated Item!'});
}
});
}
});
};
This week I implemented swiping on a mobile app and found no clear demo showing swiping in both directions. So I figured to give back to the community a little I would write one. That was until I noticed some strange behavior I couldn't understand.
I put two buttons up in the demo to test drive the demo. To swipe you can use your mouse next to the text. What happens is that when I load up the demo and swipe the already existing ngView gets the class from slideDir, the new one however does not. This happens because the new view has a new scope and has no idea what slideDir is supposed to be.
Case two is when I press a button before swiping, there is a slideDir created and filled in the scope the buttons are using and therefore swiping starts to almost behave like it should(other then some synch issues between two scopes).
So what in my configuration am I doing wrong? I had the assumption that because the app controller was on a higher laying div this was not re-initiated each time a new ngView was loaded.
The following url contains the demo: http://blackunknown.com/demos/swipingdemo/demo.html
Here is my set up in the body tag:
<div ng-app="app" ng-controller="AppCtrl">
<button ng-click='swipeLeft()'>Swipe Left</button>
<button ng-click='swipeRight()'>Swipe Right</button>
<div class="slide" ng-view ng-class="slideDir" ng-swipe-left="swipeLeft()" ng-swipe-right="swipeRight()">
</div>
<!-- Templates loaded on url change -->
<script type="text/ng-template" id="pg1.html">
<H3>Slide 1</H3>
</script>
<script type="text/ng-template" id="pg2.html">
<H3>Slide 2</H3>
</script>
<script type="text/ng-template" id="pg3.html">
<H3>Slide 3</H3>
</script>
</div>
Here is my javascript:
function AppCtrl($scope, $location, viewSlideIndex) {
$scope.swipeLeft = function(){
$scope.slideDir = 'slide-left';
$scope.url = document.URL.substr(document.URL.lastIndexOf('/'));
if($scope.url == "/pg1"){
$scope.url = "/pg2";
}
else if ($scope.url == "/pg2"){
$scope.url = "/pg3";
}
else if ($scope.url == "/pg3"){
$scope.url = "/pg1";
}
$location.url($scope.url);
}
$scope.swipeRight = function(){
$scope.slideDir = 'slide-right';
$scope.url = document.URL.substr(document.URL.lastIndexOf('/'));
if($scope.url == "/pg1"){
$scope.url = "/pg3";
}
else if ($scope.url == "/pg2"){
$scope.url = "/pg1";
}
else if ($scope.url == "/pg3"){
$scope.url = "/pg2";
}
$location.url($scope.url);
}
};
angular.module('app', ['ngRoute', 'ngAnimate', 'ngTouch'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/pg1', {
templateUrl: 'pg1.html',
controller: AppCtrl
});
$routeProvider.when('/pg2', {
templateUrl: 'pg2.html',
controller: AppCtrl
});
$routeProvider.when('/pg3', {
templateUrl: 'pg3.html',
controller: AppCtrl
});
$routeProvider.otherwise({
redirectTo: '/pg1'
});
$locationProvider.html5Mode(true);
}])
.service('viewSlideIndex', function () {
var viewIndex;
return {
getViewIndex: function () {
return viewIndex;
},
setViewIndex: function (val) {
viewIndex = val;
}
};
});
EDIT: To perform an actual swipe don't use the buttons but click-drag next to the text.
On your site, you have
$scope.slideDir = 'slide-right';
at the top of AppCtrl.
Remove this and it works. The code you have pasted here does not have that line and works as expected.