I am trying to use a progress bar when I am uploading a video, but the progress bar appears on load page and sty forever.
<div ng-show="!$ctrl.setNewVideoRecord()">
<md-progress-circular md-mode="indeterminate" md-diameter="100">
</md-progress-circular>
</div>
<md-button class="md-raised md-primary" ng-click="$ctrl.setNewVideoRecord()"> Add video</md-button>
self.setNewVideoRecord = function () {
adminService.setNewVideoRecord(self.fileForUpload)
.then(function () {
});
};
The best way is to apply a scope variable. and set the value of that scope variable accordingly inside the function. Right now you are calling a function to apply ng-show but that function should return either true or false based on which you will show progress bar . The best way is :
<div ng-show="$ctrl.videoUploading">
<md-progress-circular md-mode="indeterminate" md-diameter="100">
</md-progress-circular>
</div>
<md-button class="md-raised md-primary" ng-click="$ctrl.setNewVideoRecord()"> Add video</md-button>
self.videoUploading = false;
self.setNewVideoRecord = function () {
self.videoUploading = true;
adminService.setNewVideoRecord(self.fileForUpload)
.then(function () {
// your code here, and when the video uploading is completed again set the variable false
self.videoUploading = false;
});
};
Related
I'm new to angular JS. I'm trying to create a simple mdDialog which contains a form for signing up.
I works the first time but the ng-click does not respond the second time. I don't get any errors in console.
It works on page reload again.
HTML
<div ng-controller="UsersController as uc">
<a ng-click="uc.signUp()">Click here to sign up for the newsletter!</a>
</div>
Controller
function subscribe() {
var successHandler = function () {
$mdDialog.show(
$mdDialog.alert()
.title('Subscription processed')
.textContent('Thank you for signing up')
.ok('Ok')
);
};
if (self.email) {
UsersService.subscribe(self.email, self.firstName, self.lastName).then(successHandler, errorHandler);
self.email = '';
self.firstName = '';
self.lastName = '';
$timeout(function () {
self.showSubscribe = false;
});
}
}
function signUp() {
$mdDialog.show({
clickOutsideToClose: true,
scope: $scope,
templateUrl: '/view/templates/subscribe.html',
controller: function DialogController($scope, $mdDialog) {
$scope.cancel = $mdDialog.cancel;
}
});
}
Template:
<div class="newsletter" layout="row" layout-align="center start" flex>
<form class="form" name="newsletterForm" ng-submit="uc.subscribe();">
<div>... </div>
</form>
<div class="toolbar" flex-auto="10">
<md-button class="md-icon-button" ng-click="cancel()">
<md-icon aria-label="Close">clear</md-icon>
</md-button>
</div>
I have <md-button>My button</md-button> and want to use <md-progress-circular>, when I enter on the button, but content hasn't uploaded yet, so I want show on the button this spinner, but I don't know how :(
This is a very basic example of how to do this, you can either use ng-show or ng-if
<div ng-app='home'>
<div ng-controller="MainCtrl">
<md-button class="md-primary md-accent md-raised" ng-click="func()">
My button<md-progress-circular ng-show="processing" md-mode="indeterminate"></md-progress-circular>
</md-button>
</div>
</div>
and this goes in your controller
$scope.func = function(){
$scope.processing = true;
$timeout(function(){
$scope.processing = false;
},3000);
};
note that the $timeout is to simulate a promise or the time required to "upload content as you say"
Using angular & material, I have a sidenav on the left used to provide user's function (login, signup...).
Working fine, but I want the bar to be closed automatically once the user clicks on a menu. Currently, the bar stays open.
The sidebar code:
<md-sidenav md-component-id="user_sidenav" class="md-sidenav-left" flex>
<md-menu-content flex>
<md-menu-item>
<md-button ui-sref="app.user-state()">
<span>
User
</span>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ui-sref="vlg.user-other-state()">
<span>
Other
</span>
</md-button>
</md-menu-item>
...
Any idea?
What I have done is create a function in the controller for closing the sidenav and then on clicking of an element calling the function.
app.controller('AppController', ['$scope', '$mdSidenav',
function ($scope, $mdSidenav) {
$scope.close = function () {
$mdSidenav('left').close();
};
}]);
and then in html
<div ng-controller="AppController">
<!-- Add in code for sidenav-->
<md-button ng-href="#/path" ng-click="close()"></md-button>
</div>
You could also just add the below code to a function if your elements already have a ng-click attached.
.then(function () {
$mdSidenav('left').close();
});
I have a button which when clicked displays a windows and hides it when the button is clicked again.I want the window to close even if any other place in the page is clicked.
This is my code :
<a class="btn dropdown-toggle multiselect-btn" ng-click="content=!content;contentClick=true">
//The div to show hide
<div ng-class="{'open':content}" > div content </div>
I wrote the following window on click code in the controller but it didn't work..
$window.onclick = function () {
if($scope.contentClick){
$scope.contentClick=0;
}
else{$scope.content=false;
$scope.$apply();}
}
What is the correct way to do this?Can anyone please guide me in the right direction.Thanks.
Try this, change your controller ID:
window.onclick = function () {
var scope = angular.element(document.getElementById('controller_id')).scope();
if(scope.contentClick){
scope.contentClick=0;
}
else{
scope.content=false;
scope.$apply();
}
}
I'm not sure what do you want to achieve after content was clicked, but you can $watch content value in controller and run some action when content change value
Please see script below
var app = angular.module('app', []);
app.controller('fCtrl', function($scope) {
$scope.$watch('content', function(value) {
if (value) {
$scope.contentClick = 1;
} else {
$scope.contentClick = 0;
}
})
});
.open {
color: red ;opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="fCtrl">
<a class="btn dropdown-toggle multiselect-btn" ng-click="content=!content;contentClick=true">Click me </a>
<hr/>//The div to show hide
<div ng-class="{'open':content}">div content {{contentClick}}
</div>
</div>
</div>
I'm just finding my way with Angular, and more importantly trying to find my way without jQuery!
I'd like to have a view that shows a loading spinner while data is fetched from the server, and when it arrives (the model will have a property of "Populated") I want the spinner to fade out, and the content to fade in.
I'm using a directive for the loading bit, and ng-show seems simple enough to switch the sections in the view.
View:
<div ng-hide="model.Populated" loading-spinner></div>
<div ng-show="model.Populated"><!-- Content goes here --> </div>
Directive:
module App.Directives {
declare var Spinner: any;
export class LoadingSpinner {
constructor() {
var directive: ng.IDirective = {};
directive.restrict = 'A';
directive.scope = { loading: '=myLoadingSpinner'},
directive.template = '<div class="loading-spinner-container"></div>';
directive.link = function (scope, element, attrs) {
var spinner = new Spinner().spin();
var loadingContainer = element.find('.loading-spinner-container')[0];
loadingContainer.appendChild(spinner.el);
};
return directive;
}
}
It's the animation I'm not sure about. In particular, I want the content to fade in once the spinner has completely faded out, and I'm not sure how to do this with a callback.
Should I attempt all the animation with CSS or expand on my directive and use javascript?
(I'm using TypeScript for anyone wondering about the syntax)
I did a quick spike for my app yesterday and this is how it can be easily done.
This uses ui.bootstrap modal dialog.
When you have a long running process such as remote service call you "raise" an event via $emit. This will bubble up to your outer most scope. Here is a sample from typeahead search functionality I spiked it against.
function autoCompleteClientName(searchValue, searchType) {
var self = this;
self.$emit("WorkStarted", "Loading Clients...");
//return promise;
if (searchType === 'name') {
return $scope.clientSearchDataService.getClientsByName(searchValue)
.then(function (response) {
self.$emit("WorkCompleted", "");
return response.results;
}, function(error) {
self.$emit("WorkCompleted", "");
console.warn("Error: " + error);
});
} else if (searchType === 'number') {
return $scope.clientSearchDataService.getClientsByNumber(searchValue)
.then(function (response) {
self.$emit("WorkCompleted", "");;
return response.results;
}, function (error) {
self.$emit("WorkCompleted", "");
console.warn("Error: " + error);
});
}
};
Then we have a "shell" controller that is the controller for outermost view, the one that hosts ng-view.
(function () {
'use strict';
// Controller name is handy for logging
var controllerId = 'shellCtrl';
// Define the controller on the module.
// Inject the dependencies.
// Point to the controller definition function.
angular.module('app').controller(controllerId,
['$scope', '$modal', shellCtrl]);
function shellCtrl($scope,$modal) {
// Bindable properties and functions are placed on vm.
$scope.title = 'shellCtrl';
$scope.$on("WorkStarted", function(event, message) {
$scope.modalInstance = $modal.open({ templateUrl: "app/common/busyModal/busyModal.html" });
});
$scope.$on("WorkCompleted", function (event, message) {
$scope.modalInstance.close();
});
}
})();
Here is the modal template
<div class="modal-dialog">
<div class="modal-content">
<img src="/images/loading.gif"width="55" height="55"/>
<h3>Loading data...</h3>
</div>
<!-- /.modal-content -->
</div><!-- /.modal-dialog -->
For this to appear you have to override some styles
<style>
.modal
{
display: block;
}
.modal-body:before,
.modal-body:after
{
display: table;
content: " ";
}
.modal-header:before,
.modal-header:after
{
display: table;
content: " ";
}
</style>
and if you need full template for modal
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Keep in mind that this is just a spike that took me about 30 min to wire together. For more robust solution, you need to be able to keep track of number of processes started and completed etc, if you are executing multiple calls to remove service.