I'm using this angularjs well known function to display my anchored div:
$scope.scrollTo = function(id) {
$location.hash(id);
$anchorScroll();
}
This is the view :
<div id="foo-{{$index}}"></div>
Scroll to #foo
Now, the problem :
It is working, but, the whole body of the page is mooving when cliking. So i can't see my fixed top navbar any more.
maybe you already have encoutered this problem ?
I'd like my html body not to be able to moove when cliking an anchor, how should i do ?.
Thank you a lot if you have any idea.
Related
I am new to AngularJS. I have been developing a site that displays a list. Each element in the list is a delivered from the server as a string. Within each element I use bars as delimeters for keywords that I'd like the user to be able to click on (i.e. this is a |keyword| in this element).
I use a controller/filter to create html to remove the delimiters and make the keywords red (using a class). So the html looks ends up looking like this:
<span ng-controller="formatForGlossaryAndCodeTextCtrl" class="ng-scope">
<span ng-bind-html="formattedLineItem" class="ng-binding">
this is a
<span class="glossaryLookup" >keyword</span> <!--here is my keyword-->
in this element
</span>
</span>
I tried having the filter also generate ng-controller=xxx and ng-click=xxx in order to stay in the angular world but that doesn't work (my keyword is not clickable when I do that).
I DO have jQuery code that binds the click event to the elements with class=glossaryLookup. It currently displays an alert when I click on the keyword.
I am at a loss as to how to get that click to display an angular modal dialog. I want it to use an angular modal dialog because there is another part of the same application that already displays an angular modal dialog and I want to be consistent
So, in short... the server delivers a string containing one or more delimited words to the browser. I'd like the angular/js/jquery code on the browser to not only highlight the delimited word(s) but allow me to click on them, look up a definition (I am not concerned about how to look up the definition, at least not yet) and display that definition in a $uibModal.
Thanks for any help.
I think I actually figured it out. I created a dummydiv and gave it an id (id=dummydiv). I "assign" a controller to that div (ng-controller=dummyCtrl).
`<div id=dummydiv ng-controller=dummyCtrl></div>`
In the jQuery code that binds the click event to my keyword I use this line of code to run the function in the dummy controller that displays the dialog:
`$(document).ready(function () {
$(document)
.on("click", ".glossaryLookup", "NEED TO LOOKUP IN GLOSSARY", function (x) {
angular.element($("#dummydiv")).scope().testclick();
})
.on("click", ".codeTextLookup", "NEED TO LOOKUP CODE TEXT", function (x) {
alert(x.data)
})
});`
BTW - the dummy controller looks like this:
`//DUMMY CONTROLLER TO TEST DYNAMIC CLICK
Hydroware_Checkbox_List_Prototype_App.controller('dummyCtrl', function ($scope, $uibModal) {
$scope.testclick = function () {
alert("I WAS CLICKED BUDDY");
var modalInstance = $uibModal.open({
templateUrl: 'line_item_help.html',
controller: "LineItemHelpDialogCtrl",
scope: $scope
});
};
});`
Trying to manage for angular to scroll automatically to a specific div element when this element becomes visible.
Already searching and trying for hours (no joke) with no success.
So far tried a couple of modules
'angular-scroll'
'angular-ui-scroll'
some others i already forgot
And coudn't get one of them to work (or only on ng-click).
How far did I get?
For this question to answer; I found an example witch basically scrolls but is not what I'am trying to get tho.
e.g.
<button ng-click="scrollToHash()">Scroll</button>
..
..
<div id="#div">
..
</div>
-
function scrollController ($scope, User, $location, $anchorScroll) {
$scope.scrollToHash = function () {
$scope.hash('div');
$anchorScroll();
};
};
This way I can't gat any 'animation duration' on it.
What I know what should work is to set a $watch on the element and call the function if the element is shown.
Not getting anywhere so I ask you guys for help.
Still new on Angular so please don't blame this newbie!
Thanks
I created a service to get my scroll going. You can try this.
Controller:
app.controller("scrollController", function ($scope, scrollToTopService) {
"use strict";
$scope.scrollToHash= function () {
scrollToTopService.scrollToTop();
};
});
Service:
app.service('scrollToTopService', function ($location, $anchorScroll) {
"use strict";
this.scrollToTop = function () {
$anchorScroll.yOffset = 80; //I want it top drop 80px from id. You can remove this.
$location.hash("IdWhereIWantToScroll");
$anchorScroll();
};
});
And here is your view:
<button ng-click="scrollToHash()">Scroll</button>
..
..
<div id="IdWhereIWantToScroll">
..
</div>
Hope this helps. Good luck.
Try to show/hide the elements using nh-show or ng-hide and then put a watch on the property used to show/hide the element. About scrolling, you already have a solution for that.
I have layout where I have:
<li ng-click="GetLoader();">ACCOUNT</li>
<li ng-click="GetLoader();">SETTINGS</li>
On the index page, I have a menu and ng-view where I can change pages on a click
Also included on the index page is a spinner.
<div class="loading" ng-show="ticketloading" ng-init="GetLoader()">
<div>
<img class="spinner" ng-src="~/Images/ajax-loader.gif" />
</div>
</div>
In my script I have -
$scope.GetLoader = function() {
$scope.ticketloading = true;
loader.css("z-index", "1");
}
My problem is that when a user clicks on "Account" it gets loaded, but just for few milliseconds. Then it changes to all blank. I receive data from ng-view. My question is how can I delay showing ng-view to show the loader a little bit longer.
Thanx in advance!
First of all you should avoid using DOM manipulations in controller. In your case it's better to use declarative ngClass directive to set opacity.
Then your actual issue is that you don't want to use static setTimeout to hide loaded, but rather listen $routeChangeSuccess:
$rootScope.$on('$routeChangeSuccess', function() {
$rootScope.ticketloading = false;
});
and use this loading flag in template like you are currently doing.
You can put above event listener in run block for example.
You can add property in your controller, for example dataLoading and add ng-if attribute to ng-view like this:
layout
<div ng-view ng-if="!dataLoading">
controller
function loadData()
{
var self = this;
self.dataLoading = true;
dataService.loadData(params, function(){
...
self.dataLoading = false;
});
}
My angular.js knowledge is very limited. Currently I have an image loading via
<img class="main" ng-src="{{URL}}{{magazine[pdf][page].url}}"/>
This works fine, so I won't bother with the js code. I wish to get an alert when the image has loaded. So I changed the code to
<img class="main" ng-src="{{URL}}{{magazine[pdf][page].url}}" onload="preLoad()"/>
angular.js
$scope.preload = function() {
alert("Image is loaded");
};
When the image loads initially I get no alert. When I refresh the page and the image is loaded from cache, then I get an alert. What am I missing here?
Not the best implementation I stumbled across, but it seems to work;
I gave the HTML element an id
<img class="main" id="mainImage" ng-src="{{URL}}{{magazine[pdf][page].url}}"/>
And added this jScript at the end of my controller
var imageLoaded = document.getElementById('mainImage');
imageLoaded.onload = function () {
alert ("Image has loaded!");
};
I'm not sure exactly why this works over my original implementation but im leaving this here for anyone else looking for a 'solution'
Trying to get angular to render a list of directives after a drop-down is toggled in bootstrap.
Ideally, I'll $scope in the main view Ctrl:
$scope.directiveList = ['messages', 'events', 'cart'];
and in the html
<div ng-repeat="directive in directive-list">
<{{directive}}/>
</div>
the results i'm getting are plain text, i.e. . I've tried to modify another helper directive I learned that renders normal html elements fine but doesn't render custom expressions. Here's that directive code:
.directive("notify", function(){
return {
restrict:"EA",
scope:{element:"="},
link:function(scope, iElem) {
var domElement = document.createElement(scope.element);
iElem.append(domElement);
}
};
});
This code renders the element in plain text as well tho it doesn't show in the view. Any help, as always, is much appreciated! Thanks in advance!