I was developing a simple stopwatch app using AngularJS + Angular Material + Electron, and somehow the data changes/watches were being delayed, until another UI interaction takes place (?) This had never happened before when I was using Bootstrap, and I can confirm it is not Electron that is the issue.
As I'm starting out today with these, I've made use of latest versions of AngularJS, Angular Material and Electron, all pulled with Bower.
EDIT: Here's the pen: http://codepen.io/anon/pen/jWgzev
Here's where the app starts:
Upon pressing the play button, the timer starts counting down to zero, and the play button gets replaced:
And when the timer hits zero, the button should have been replaced by an orange stop button, and yet it does not happen:
And when you hover your mouse over one of the two buttons on screen, the gray button magically transforms to orange:
I apologize in advance if I'm posting blocks of code, I just don't know where the problem is.
HTML:
<!doctype html>
<html class="no-js" lang="" ng-app="breaktime-stopwatch">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="styles/normalize.min.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/font-awesome.min.css">
<link href="./bower_components/angular-material/angular-material.css" rel="stylesheet" />
<link rel="stylesheet" href="styles/app.css">
<!--<script src="scripts/vendor/modernizr-2.8.3.min.js"></script>-->
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
</head>
<body ng-controller="AppController as vm" layout="column">
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<span>
<h1 class="md-title">Breaktime Stopwatch</h1>
</span>
<!-- fill up the space between left and right area -->
<span flex></span>
<md-button href="" class="md-icon-button">
<md-icon md-font-icon='fa fa-question-circle fa-2x'></md-icon>
<md-tooltip md-direction="left">
About and Help
</md-tooltip>
</md-button>
</div>
</md-toolbar>
<md-content layout="column" layout-padding>
<div flex layout="row" layout-align="center center">
<!--<md-progress-circular md-mode="indeterminate" md-diameter="50"></md-progress-circular>-->
<!--<md-progress-circular md-mode="determinate" ng-value="meter" md-diameter="50"></md-progress-circular>-->
<timer class="clock md-display-4" autostart="false" interval="1000" countdown="break_duration" finish-callback="stopTimer()">{{minutes}}:{{seconds}}</timer>
</div>
<div layout="row" layout-align="center center">
<span ng-if="playButton">
<md-button class="md-fab md-primary" aria-label="Play" ng-click="startTimer()">
<md-icon md-font-icon='fa fa-play fa-2x'></md-icon>
<md-tooltip md-direction="top">
Start
</md-tooltip>
</md-button>
</span>
<span ng-if="stopEarlyButton">
<md-button class="md-fab md-accent" aria-label="Stop Earlier" ng-click="stopEarlyTimer()">
<md-icon md-font-icon='fa fa-stop fa-2x'></md-icon>
<md-tooltip md-direction="top">
Stop
</md-tooltip>
</md-button>
</span>
<span ng-if="stopButton">
<md-button class="md-fab md-warn" aria-label="Stop" ng-click="stopTimer()">
<md-icon md-font-icon='fa fa-exclamation fa-2x'></md-icon>
<md-tooltip md-direction="top">
Stop
</md-tooltip>
</md-button>
</span>
</div>
</md-content>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!--pre-dependencies-->
<script src="scripts/plugins.js"></script>
<!--dependencies-->
<script src="./bower_components/jquery/dist/jquery.min.js" type="text/javascript" ></script>
<script src="./bower_components/angular/angular.js" type="text/javascript" ></script>
<script src="./bower_components/angular-animate/angular-animate.js" type="text/javascript" ></script>
<script src="./bower_components/angular-aria/angular-aria.js" type="text/javascript" ></script>
<script src="./bower_components/angular-material/angular-material.js" type="text/javascript" ></script>
<script src="./bower_components/momentjs/min/moment.min.js" type="text/javascript" ></script>
<!--<script src="./bower_components/momentjs/min/locales.min.js" type="text/javascript" ></script>-->
<script src="./bower_components/humanize-duration/humanize-duration.js" type="text/javascript" ></script>
<script src="./bower_components/angular-timer/dist/angular-timer.min.js" type="text/javascript" ></script>
<!--application config-->
<script src="scripts/app.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<!--<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>-->
</body>
</html>
JS:
(function () {
'use strict';
var btsw = angular.module('breaktime-stopwatch', [
'ngMaterial',
'timer'
]);
btsw.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('indigo')
.accentPalette('grey');
});
btsw.controller('AppController', function AppController($scope, $mdDialog){
$scope.timerRunning = false;
$scope.playButton = true;
$scope.stopEarlyButton = false;
$scope.stopButton = false;
$scope.break_duration = 10;
$scope.break_var = angular.copy($scope.break_duration);
// $scope.meter = 0;
$scope.startTimer = function (){
$scope.$broadcast('timer-start');
$scope.timerRunning = true;
$scope.playButton = false;
$scope.stopEarlyButton = true;
};
$scope.stopEarlyTimer = function (){
$scope.$broadcast('timer-stop');
$scope.timerRunning = false;
$scope.playButton = true;
$scope.stopEarlyButton = false;
};
$scope.stopTimer = function (){
$scope.stopEarlyButton = false;
$scope.$broadcast('timer-stop');
$scope.timerRunning = false;
$scope.playButton = false;
$scope.stopEarlyButton = false;
$scope.stopButton = true;
};
$scope.test = function(){
console.log($scope.break_duration);
console.log($scope.break_var);
// console.log($scope.meter);
}
$scope.$on('timer-tick', function (event, data) {
$scope.break_var = data.millis/1000;
// if($scope.meter < Math.round(100-(($scope.break_var/$scope.break_duration)*100)))
// {$scope.meter = Math.round(100-(($scope.break_var/$scope.break_duration)*100));}
// console.log($scope.meter);
});
});
})();
Any kind of help that will point me to the right direction will be greatly appreciated!
Without digging into the timer code too much, I'm guessing that the finish-callback functionality that it provides may be running at the end of the digest loop, or entirely outside of Angular's digest cycle (which is a bit odd since it's an Angular module).
If this is the case, simply adding $scope.$digest(); to the end of your $scope.stopTimer() function should do the trick.
Here is an updated Codepen which works as expected: http://codepen.io/topherfangio/pen/bEXXNj
EDIT: As a side-note: it changes in your Codepen after hovering the button because the tooltip is triggering a digest cycle.
Related
Problem: I have created a webpage with an md-card that has a button. Upon clicking that button, I want another card to appear. The Problem: I cannot figure out, how to make the button of the new card work. It is not correctly formated and it has no functionality.
Question: What do I need to change the code to, to make it work? Thanks.
Code: This is my JavaScript-Code:
angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function($scope, $mdDialog) {
function addMeinElement () {
// create a new div element
var newDiv = document.createElement("md-card");
document.querySelector('#myID').appendChild(newDiv);
newDiv.innerHTML = "<md-card-content>Oh no! Why does this button not work?<br>"+
"<md-button class='md-warn' ng-click='my_print_to_console()'>Button :( </md-button>"+
"</md-card-content>";
}
$scope.my_print_to_console = function () {
addMeinElement ();
};
});
This is the corresponding html:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-firestore.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel='stylesheet' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.13/angular-material.css'>
<link rel='stylesheet' href='https://material.angularjs.org/1.1.13/docs.css'>
</head>
<body>
<div ng-controller="AppCtrl" ng-app="MyApp">
<div style="position:fixed; width:100%; top:0; height:100%;">
<div style="position:fixed;width:80%;top:0;left:50%;transform: translate(-50%, 0);">
<md-card>
<md-card-content>
<p>Click the button to hopefully create a new card with another button.</p>
<md-button class="md-warn" ng-click="my_print_to_console()";>Button :)</md-button>
</md-card-content>
</md-card>
<div id="myID">
</div>
</div>
</div>
</div>
<!--
Copyright 2018 Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be found
in the LICENSE file at http://material.angularjs.org/HEAD/license.
-->
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-messages.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js'></script>
<script src='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.13/angular-material.js'></script>
<script src="app.js"></script>
</body>
It happens because Angular not aware that this is a an Angular component. you need to wrap your HTML with $compile service.
Add '$compile' to your module dependency
Wrap the code like that
$compile('your html here')($scope);
So I'm going through the introduction in the Angular Materials site here. As far as I can tell, I'm following the directions to the letter.
Looking more on stack overflow and google seems to indicate the CND links were wrong, but I'm getting the same result. I'd post a link, but I'm new here.
I'm getting no errors and using Visual Studio 2015
When opening the page in Chrome and pull up the dev tools I get this:
Errors when inspecting from Chrome
I also tried installing them from both npm and bower and changing the links accordingly to no avail.
I'd post a plunker, but again, I'm new.
Here is my code Angular code:
<!DOCTYPE html>
<html ng-app="ReconciliationWebApp">
<head>
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
</head>
<body ng-controller="MainCtrl">
<!--Content-->
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Reconciliation Forms</h2>
</div>
</md-toolbar>
<md-content>
<div layout="row" layout-align="center start">
<div layout-fill>
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Hello!</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>
Whatever you do, do not click the button below.
</p>
</md-card-content>
<md-card-actions layout="row" layout-align="start">
<md-button ng-click="releaseKraken()" class="md-primary md-raised">I Dare You!</md-button>
</md-card-actions>
</md-card>
</div>
</div>
</md-content>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
<script src="../../Scripts/Tabs.js" charset="utf-8"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
angular.module('ReconciliationWebApp', ['ngMaterial']);
</script>
</body>
</html>
And here is my Javascript:
angular.module('ReconciliationWebApp', ['ngMaterial'])
.controller('MainCtrl', function ($scope, $mdDialog) {
$scope.hello = 'Hello Angular Material';
$scope.releaseKraken = function () {
$mdDialog.show(
$mdDialog.alert({
title: 'Danger',
textContent: 'You asked for it!',
ok: 'Run!'
})
);
}
})
;
Can anybody tell me what I'm doing wrong?
I hope I've explained myself well enough, but let me know if there is anything else that I can provide that might help!
If you are using the script file in a different location you need to add the reference to that file in the index page. Your code works completely fine. Here is the working plunker: http://plnkr.co/edit/Ux1pOFgvQgipMqzvfs9X?p=preview
<!DOCTYPE html>
<html ng-app="ReconciliationWebApp">
<head>
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
</head>
<body ng-controller="MainCtrl">
<!--Content-->
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Reconciliation Forms</h2>
</div>
</md-toolbar>
<md-content>
<div layout="row" layout-align="center start">
<div layout-fill>
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Hello!</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>
Whatever you do, do not click the button below.
</p>
</md-card-content>
<md-card-actions layout="row" layout-align="start">
<md-button ng-click="releaseKraken()" class="md-primary md-raised">I Dare You!</md-button>
</md-card-actions>
</md-card>
</div>
</div>
</md-content>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
<script src="../../Scripts/Tabs.js" charset="utf-8"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
angular.module('ReconciliationWebApp', ['ngMaterial'])
.controller('MainCtrl', function ($scope, $mdDialog) {
$scope.hello = 'Hello Angular Material';
$scope.releaseKraken = function () {
$mdDialog.show(
$mdDialog.alert({
title: 'Danger',
textContent: 'You asked for it!',
ok: 'Run!'
})
);
}
})
;
</script>
</body>
</html>
I have two questions
How to display the initial message and/or upon button click. The current code I have displays the message continuously. I want it to display initially and once users starts pressing other button I want the message "Start guessing" to disappear and only appear after user clicks Start Over button.
How to display the correct answer when user clicks on Give up.
HTML
<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<head>
<title>Template that uses Bootstrap</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initialscale=1.0"/>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!-- Custom CSS -->
<link href="css/custom.css" rel="stylesheet" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div data-ng-controller="myCtrl">
<div class="container">
<h1>Guessing Game</h1><br>
<label>Enter Guess:</label>
<input type="text" id="guess" name="guess" data-ng-model="guess"/><br>
<span data-ng-bind="Message"></span>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary btn-md" data-ng-click="checkGuess()">Check</button>
<button class="btn btn-warning btn-md" data-ng-click="showAnswer()">Give Up</button>
<button class="btn btn-info btn-md" data-ng-click="startGame()">Start Over</button>
</div></div>
<div class="row">
<div class="col-xs-7">
<div ng-show="deviation<0" class="alert alert-warning">Guess higher</div>
<div ng-show="deviation>0" class="alert alert-warning">Guess lower</div>
<div ng-show="deviation===0" class="alert alert-success">You got it!</div>
</div></div>
</div>
</div>
<!-- jQuery – required for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- All Bootstrap plug-ins file -->
<script src="js/bootstrap.min.js"></script>
<!-- Basic AngularJS -->
<script src="js/angular.min.js"></script>
<!-- Your Controller -->
<script src="js/app.js"></script>
</body>
</html>
Angular
/*global angular */
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function ($scope) {
"use strict";
$scope.checkGuess = function () {
$scope.deviation = $scope.original - $scope.guess;
};
$scope.startGame = function () {
$scope.guess = null;
$scope.original = Math.floor(Math.random() * 1000 + 1);
$scope.deviation = null;
$scope.display = false;
$scope.Message = "Start guessing.";
};
$scope.showAnswer = function () {
$scope.original = Math.floor(Math.random() * 1000 + 1);
$scope.display = true;
};
$scope.startGame();
}
);
1) Use ng-hide to hide your element when needed:
<span data-ng-bind="Message" ng-hide="hideMessage"></span>
In the checkGuess and showAnswer functions set the hideMessage to true:
$scope.hideMessage = true;
In the startGame function, set it to false:
$scope.hideMessage = false;
2) In your HTML add a tag:
<div ng-show="showOriginal">{{previousOriginal}}</div>
And in your showAnser and startGame function, add:
$scope.showOriginal = true;
$scope.previousOriginal = angular.copy($scope.original);
And remove of the showAnswer function:
$scope.original = Math.floor(Math.random() * 1000 + 1)
Finally, in the startGame function, set it to false:
$scope.showOriginal = false;
Hi Guys I need to change the existing profile name in settings page.
1. First Name must be displayed in Username: {{name}}
2. I have given button to show dialog box to change name, when clicked save the name must be changed and displayed in the Username:{{name}} That is all i needed.. I need code like below, This code is just a example..
var app = angular.module('AngularApp', ['ngMaterial']);
app.controller('SettingCtrl', ['$scope', '$mdDialog',
function($scope, $mdDialog) {
$scope.name = "test";
$scope.ChangeName = function(ev) {
$mdDialog.show({
controller: SetDialogController,
template: '<md-dialog aria-label="Add insert" md-theme="dialogtheme"><md-content>' +
'<form name="ChangeName"><div layout layout-sm="column"><md-input-container flex>' +
'<label>Client Name</label><input ng-model="newname" placeholder="New Name">' +
'</md-input-container><div></form> </md-content>' +
'<div class="md-dialog-actions" layout="row"> <span flex></span>' +
'<md-button ng-click="cancel()"> Cancel </md-button>' +
'<md-button ng-click="saveClient()" class="md-warn"> Save </md-button>' +
'</div></md-dialog>',
targetEvent: ev,
clickOutsideToClose: true
})
.then(function(answer) {
$scope.status = 'You said the information was "' + answer + '".';
}, function() {
$scope.status = 'You cancelled the dialog.';
});
};
}
]);
function SetDialogController($scope, $mdDialog) {
$scope.saveClient = function() {}
$scope.cancel = function() {
$mdDialog.cancel();
};
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>ViewSalesVisit</title>
<!-- <link href="css/style.css" rel="stylesheet"> -->
<link href="js/angular-material.min.css" rel="stylesheet">
<!-- cordova script (this will be a 404 during development) -->
<!-- <script src="cordova.js"></script> -->
<script src="js/angular.min.js"></script>
<script src="js/angular-material.min.js"></script>
<script src="js/angular-aria.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="AngularApp" ng-controller="SettingCtrl">
<div>
<md-content md-scroll-y>
<md-toolbar class="md-toolbar-tools" layout-align="center">
<h3>Settings</h3>
</md-toolbar>
<div>
<h1>Username: {{name}}</h1>
<md-button class="md-primary md-raised" ng-click="ChangeName($event)" flex="100" flex-gt-md="auto">
Change Username
</md-button>
</div>
</md-content>
</div>
</body>
</html>
Thank you in advance guys..
On the HTML I have an overlay div to show a loading progress which uses the directive ng-show="showLoading". On the template ng-click I call the controller searchRequest method. This method updates showLoading to true just before making the http request.
If I do it this way the loading doesn't show, if I use the $scope.$apply to update the variable then I got the $apply already in progress error message. What is going on? How should I do this?
This is the index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/angular-route.js" ></script>
<!-- your app's js -->
<script src="js/searchController.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="myApp" ng-init="showLoading = false">
<div id="overlay" ng-show="showLoading">
<img id="loading" src="img/ajax-spinner.gif" />
</div>
<div ng-view></div>
</body>
</html>
The template:
<div ng-controller="searchController as searchController">
<ion-header-bar class="bar-stable">
<h1 class="title">Movie Searcher</h1>
</ion-header-bar>
<ion-content>
<label class="item item-input">
<span class="input-label">Title</span>
<input style="border-style: solid;border-width: 1px;" type="text" ng-model="searchController.searchString" required>
</label>
<button class="btn" ng-click="searchController.search()">Search</button>
{{response}}
</ion-content>
</div>
And the controller:
this.searchRequest = function(url) {
$scope.showLoading = true;
$http.get(url).success(function(data) {
$scope.showLoading = false;
//console.log("Success: " + JSON.stringify(data));
$scope.response = JSON.stringify(data);
for (i=0; i<data.length; i++) {
var movie = data[i];
//console.log("Movie: " + movie);
var genres = '';
for (j=0; j<movie.genres.length; j++) {
genres += movie.genres[j];
if (j < movie.genres.length - 1) {
genres += ', ';
}
}
console.log("Title: " + movie.title);
console.log("Plot: " + movie.simplePlot);
console.log("genres: " + genres);
}
})
.error(function(data, status, headers, config) {
$scope.showLoading = false;
$scope.response = "Error: " + status;
})};
Your Overlay div does not have the data context of the right controller.
When you specify the ng-controller directive, you are telling angular to use that specific controller as its current scope.
<div ng-controller="searchController as searchController">
Whereas for your body section here, you did not specify the right controller. So, angular doesn't know where showloading property is coming from.
<body ng-app="myApp" ng-init="showLoading = false">
<div id="overlay" ng-show="showLoading">
<img id="loading" src="img/ajax-spinner.gif" />
</div>
<div ng-view></div>
</body>
Either move the overlay div into the div which has the controller as context or try using $rootScope instead.
Probably the easiest way to force a digest cycle without having to worry about the phase is to wrap the var change call inside a $timeout function:
$timeout(function() {
$scope.showLoading = true;
}, 0);
$http.get(url).success(function(data) {
...
Of course, don't forget to inject $timeout as a dependency in your controller.