I have a div-layer which dynamically loads html-partials from the server. The template variable is changed when a link in the navigation is clicked.
<div id="ajaxwrapper" ng-include="template">
</div>
This works fine. But the templates need a short time to load and during that time the user doesn't get any kind of response. Thats why I want to display a spinner until the template is load. Sadly I don't know how.
My links look something like this:
<a ng-click="navi($event)" href="www.someurl.de">Text</a>
The navi-function looks like this:
$scope.navi = function (elem) {
elem.preventDefault();
var urlstring = "";
if (typeof elem.target.href !== 'undefined') {
urlstring = elem.target.href;
$location.path(elem.target.pathname).search({ knt: $scope.aktuellesVertragskonto.nr });;
} else {
urlstring = elem.target.baseURI
$location.path("/");
}
$scope.template = $location.absUrl();
};
I need some pointers on how to implement a spinner. Thank you :)
The spinner-template would look like this:
<script type="text/ng-template" id="loader">
<div class="text-center">
<img src="~/images/spinner/ajax-loader.gif" /><br />
Loading
</div>
The ng-include directive includes an onload expression (reference), so you can do something like this:
<div id="ajaxwrapper"
ng-show="loaded"
ng-include="template" onload="loaded = true">
</div>
<div class="text-center"
ng-hide="loaded">
<img src="~/images/spinner/ajax-loader.gif" /><br />
Loading
</div>
There is another way as well, as ng-include override inside div html so you can show loader till template loads.
You can put loader inside the div as below.
<div id="ajaxwrapper" ng-include="template">
// Show loader image or css
</div>
Related
I have in my controller a variable, which is defined on the $scope, which contains an html input.
function init() {
$scope.message = params.message;
}
Where params.message could be for example something like this:
<h1>Hellow world</h1><p>Hi again</p><br><br> <b> End </b>
in the html I use it like this:
<div ng-show="showTab == 'EN'">
<div class='library-padding'>
<p>{{message}}></p>
</div>
</div>
I want it to be shown as parsed html, meaning that the tags themselves will not appear, but it's displayed as plain text, including all tags.
How can I make this input text parsed and behaving like html?
Thanks!
You're looking for the ngBindHtml directive:
https://docs.angularjs.org/api/ng/directive/ngBindHtml
<div ng-show="showTab == 'EN'">
<div class='library-padding'>
<p ng-bind-html="message"></p>
</div>
</div>
I have an ionic 1 app and im trying to dynamically change a img source. I thought all i had to do whas update the scope linked to this source, but it doesn't worked. Any idea on what might be wrong?
my View
<div ng-if="isList" class="item style-list" ng-repeat="(key, item) in items"
ng-click="goTo(item)">
<div class="img-container" ng-if="isList">
<m-img encode="true" src="item.image"></m-img>
</div>
<h1 ng-bind="item.title"></h1>
<p ng-bind="item.resume" ng-if="item.resume"></p>
<p ng-bind-html="stripHtml(item.description) | mCut:100" ng-if="!item.resume"></p>
</div>
my Controller
$scope.$on("update-data", function(event, args) {
$scope.items[1].description =
args.response.results[0].item.description;
$scope.items[1].id = args.response.results[0].item.id;
$scope.items[1].image = args.response.results[0].item.image;
$scope.items[1].resume = args.response.results[0].item.resume;
$scope.items[1].title = args.response.results[0].item.title;
});
My m-img component
html
<div class="thumb-size notloaded">
<div class="thumb" ng-if="imgStyle" ion-img-cache-bg ng-
style="imgStyle">
</div>
</div>
My m-img JS is kinda extensive, here https://codeshare.io/adABMe
it seems that the error is inside mImg component, from the code here you're not watching changes on src attribute (but you're doing it only on url attribute that here is not used) and you're triggering some logic (defined in $scope.load) to update the view.
You should add a watcher even on src and trigger your load method to update $scope.imgSrc variable , this should update your view consequently
controller: function($scope, $timeout, $mAppDef) {
$scope.$watch('src', function() {
$scope.load()
});
}
I use Angular JS library ngActivityIndicator.
I tried to show preloader inside element div instead text when button is pushed:
<div ng-activity-indicator="CircledDark">
<div ng-click="Add();" class="btn shareBtn">
<div ng-view></div>
<span>Text</span>
</div>
</div>
I posted <div ng-view></div> inside and have added directive ng-activity-indicator="CircledDark" to parent element.
When I click button, I call function that display preloader:
$activityIndicator.startAnimating();
But preloader is created outside of button:
<div ng-show="AILoading" class="ai-circled ai-indicator ai-dark-spin"></div>
This is official documantation, from here I have taken example:
https://github.com/voronianski/ngActivityIndicator#directive
How to show preloader inside button instead text Angular JS?
I think the only solution is to separate your ng-view and button, at least they do something similar in their sample page. So, in your markup you could do something like this:
<div ng-click="add()" class="btn btn-default" ng-activity-indicator="CircledDark">
<span ng-show="!AILoading">Add</span>
</div>
<div ng-view ng-show="!AILoading">{{ delayedText }}</div>
And in your controller:
$scope.delayedText = "";
$scope.add = function() {
$activityIndicator.startAnimating();
$timeout(function() {
$scope.delayedText = "Here we are!";
$activityIndicator.stopAnimating();
}, 3000);
};
Here is full Demo, you can play with CSS a little so the size of the button won't change when text is replaced by icon.
Question:
How can I add a "Login" view/route to my angular app that hides an element that is outside the ng-view DOM?
Situation:
In my Angular page, I have a navigation tree view on the left and the main view in the center:
<div ng-app="myApp">
<div class="col-sm-3" ng-controller="TreeController">
<div treeviewdirective-here>
</div>
</div>
<div class="col-sm-9 content" ng-view="">
</div>
</div>
Each node in the treeview changes the location using something like window.location.hash = '#/' + routeForTheClickedItem;.
Using the standard routing, this works great, i.e. the tree is not reloaded each time, but only the main "window".
Problem:
I want to add a login functionality with a login view. For this view, the treeview should not be visible - only after the login. To achieve this with the normal routing, I know I could move the ng-view one level up, i.e. embed the treeview into each view - but this would result in the treeview being reloaded with every route change.
Is there an easy alternative that allows me to check what page is displayed in the ng-view? Or check some other variable set during the routing? Then I could use something like:
<div class="col-sm-3" ng-controller="TreeController" ng-show="IsUserLoggedIn">
You could listen for a routeChangeSuccess outside ng-view
$scope.$on('$routeChangeSuccess', function (event, currentRoute, previousRoute) {
//do something here
});
hope that helps, you can catch me on angularjs IRC - maurycyg
You could define a controller at the top div level.
Something like:
<div ng-app="myApp" ng-controller="MainController">
and in MainController inject a Session. Something like Session is enough to decide whether to show the tree.
Here's an example of MainController:
_app.controller('MainController', function ($scope, SessionService) {
$scope.user = SessionService.getUser();
});
Here's an example of SessionService:
_app.factory('SessionService', function() {
var user = null;
return {
getUser : function() {
return user;
},
setUser : function(newUser) {
user= newUser;
}
};
});
Of course, when you login you must set the user to the SessionService. Therefore, a SessionService has to be injected into your LoginController, too.
And finally, your html:
<div ng-app="myApp" ng-controller="MainController">
<div class="col-sm-3" ng-controller="TreeController">
<div ng-hide="user == null" treeviewdirective-here>
</div>
</div>
<div class="col-sm-9 content" ng-view="">
</div>
</div>
I'm trying to implement a mechanism to hide / show div within a group meaning that I want to only have one div displayed for the group. Of course, I can implement this using the ng-show directive but I would like to have something more generic.
For example:
<div div-group="mygroup">
<div id="div1"> ... </div>
<div id="div2"> ... </div>
<div id="div3"> ... </div>
</div>
If I call a function like showDiv("div1"), other div would be hidden (div2 and div3). I thought about adding an object on the root scope containing all inner div status (displayed or hidden).
Thanks very much for your help!
Thierry
One way could be using ng-class
.show{
display:block
}
.hide{
display:none;
}
<div div-group="mygroup">
<div id="div1" ng-class={true:'show',false:'hide'}[selecteddiv='div1']> ... </div>
<div id="div2" ng-class={true:'show',false:'hide'}[selecteddiv='div2']> ... </div>
<div id="div3" ng-class={true:'show',false:'hide'}[selecteddiv='div3']> ... </div>
</div>
$scope.choose=function(id){
$scope.selecteddiv=id;
}
So you could pass proper id as string in function
If you want to do this in vanilla js, you just can write your showDiv function like this
function showDiv(id) {
//hide all divs
document.findElementById('div1').style.display = 'none';
document.findElementById('div2').style.display = 'none';
document.findElementById('div3').style.display = 'none';
//show just the div you want
document.findElementById(id).style.display = 'block'; //or whatever it was before
}