I have an app I've written that takes a name as an argument, but when I click the link after loading some other name the page does nothing, despite the new arguments passed via the URL. I'd imagine the Angular DOM isn't having it reload since it's "technically" the same webpage. I do, however, need it to load the updated data.
Here's the Angular JS/HTML that populates the list of links:
<li ng-repeat="internalRep in internalReps ">{{internalRep.such}}</li>
Now when you're on a totally different page and click one of the links it works perfectly. However, if you're already on ./repweekly.html#!?rep=REP1 and click on the link to go to ./repweekly.html#!?rep=REP5 it'll change the URL in the URL bar, but nothing else happens. If you then click the refresh button the correct data loads.
I changed the code to this:
<li ng-repeat="internalRep in internalReps "><a ng-href="./repweekly.html#!?rep={{internalRep.such}}">{{internalRep.such}}</a>
and again, while the URL in the address bar changes, the page doesn't reload to show the updated rep.
Alrighty, here's what I ended up doing -
The link stays as Josué suggested with one exception - I added an ng-click directive ( ng-click="reloadRep()" ) to it:
<li ng-repeat="internalRep in internalReps"><a ng-href="repweekly.html#?rep={{internalRep.such}}" ng-click="reloadRep()">{{internalRep.such}}</a></li>
I then injected $window into the controller:
angularApp.controller('mainController', ["$scope", "$http", "$filter", "$location", "$window", function ($scope, $http, $filter, $location, $window) {...
and finally I created the function that runs when ng-click is called:
$scope.reloadRep = function () {
$window.location.reload();
};
Related
I have a page in my AngularJS that has an edit button, I need to open the edit page on another tab when I click the edit button. Can it be possible using the angular way? I need to use the same controller to be able to access the data. How can I possible do this? Can someone please give me a sample?
Here's a fiddle to show opening the tab:
https://jsfiddle.net/e8g1m0xs/
I.e.:
angular.module('new_tab', [])
.controller('ExampleController', ['$scope', '$window', function($scope, $window) {
$scope.openTab = function() {
$window.open('https://www.google.com', '_blank');
};
}]);
<div ng-app="new_tab" ng-controller="ExampleController">
<button ng-click="openTab()">New Tab</button>
</div>
But in order to use the same controller for the new tab, and do something like pass information to it, you would have to implement a wildcard pattern into your angular router to pass along state information. I usually do things like that using UI Router. See the section titled URL Parameters.
I'm totally new to Ionic and JavaScript and I'm having a few problems when changing views in my project.
I've created the project using the tabs starter, and everything works when moving withing the default tabs and even when adding new ones. At certain parts of the code, I need to move to a tab view so I'm using the $state.go() function and it works fine. However, I've added a new view with its template, controller, and state and I need to load it when clicking a button. So I use $state.go() again, but the URL in the explorer changes but not the view, it stays in the previous one. It doesn't work either when I type the URL in the browser, so maybe the problem is in the state definition, but I'm pretty sure it is ok.
State
.state('tab.file_explorer', {
url: '/file_explorer',
views: {
'tab-file_explorer': {
templateUrl: 'templates/tab-file_explorer.html',
controller: 'file_explorerCtrl'
}
}
})
Controller
It is in the controller of another view where the button is located (the button works fine, I've tested it). The file_explorerCtrl controller is empty at the moment.
.controller('load_csvCtrl', function($scope, $state) {
$scope.loadCsv = function(){
$state.go('tab.file_explorer');
}
}
This redirects to the URL http://localhost:8100/#/tab/file_explorer, with no console output or 404 errors. I've also tried using $location.path() and $window.location.assign() but it also fails to load the template.
I'd appreciate any help.
Can you check if your index.html has <ion-nav-view></ion-nav-view> tag
You're using named views. your <ion-nav-view> should match the name:
<ion-nav-view name="tab-file_explorer"></ion-nav-view>
Check the docs here:
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
Set cache-view="false" in View.
Example:
<ion-view cache-view="false">
<!-- View Content goes here -->
</ion-view>
I have a PhoneGap app, that has multiple html pages.
I use one controller, called AppController, that loads the data for the startup screen and default pages.
I added a new page to the navigation bar, which, when clicked & opened should load up data from the server with a php call, so it should only make a php call, when the page is shown.
This page uses the same controller as the rest of the app.
I am really new to AngularJS, so I might've programmed it in a bad way, but the rest of the data for the home page is loaded in the appController like this
myApp.controller('AppController', function ($scope, $timeout, sharedProperties) {
$scope.items= {};
$scope.items[item1] = {....} //LOADING UP the items collection
}
How can I hook up an "onload" event or something, that would only fire when the page is shown?
There are so many ways you could do that, one of them:
// inside your controller
angular.element(document).ready(function () {
// your code
});
another one:
<div ng-controller="myCtrl" ng-init="someinitfunc()"></div>
How about using ng-init() directive on your next page ?
From my AngularJS Home Page I need to scroll to an anchor tag in another page. Both these pages are coming as partial html's into the ng-view component, based on the url. On starting the server, the home page is loaded and from there in need to go to the faq page. I used the normal href with #, but that didn't point to the correct div in the target page. Here is what I tried with $anchorScroll
Here is the controller method
$scope.scrollToFaq = function(id) {
$location.path("/faq")
$location.hash(id);
$anchorScroll();
}
Here is how I use it in the home.html
<a ng-click="scrollToFaq('HERE')" href="" class="link">Here</a>
But this is not working properly. If I load the faq page directly and then come back and click the anchor link from the home page, it works. Is it possible to do this with `$anchorScroll
Try to use Angular's $timeout service.
$scope.scrollToFaq = function(id) {
$location.path("/faq");
$timeout(function(){
$location.hash(id);
$anchorScroll();
}, delay);
here delay would be the time you would like to wait until the anchor scroll happens. I have read about 300ms / 400 ms working for people. When I had this issue, I just had to call the $anchorscroll inside the $timeout. So use what's best for you case.
Note: I am on the lookout for a solution without the use of $timeout. Will update when I find one.
Sounds like a history related issue. If the div has already been loaded once it is found immediatly. This solution worked for me in the past. Maybe an idea to wait for the page to load.
$scope.scrollToFaq = function(id) {
$location.path("/faq");
$(window).on("load", function(){
$location.hash(id);
$anchorScroll();
});
};
Had the same problem. But fixed it :)
Idea is to change to the URL, wait a halfsecond and than jump to the anchor.
HTML:
Links
Controller:
angular.module('exampleApp').controller('NavbarCtrl', function ($scope, $location, $timeout, $anchorScroll) {
$scope.goToAnchor = function(path, anchor){
$location.path('/');
$timeout(function() {
$anchorScroll(anchor);
}, 500);
};
});
I use Node.js as a server it's completely working well unless I add AngularJS to the stack, which broken completely all of my URL in Node.js. Specifically, I want to toggle the active of my tabs in Bootstrap 3 navigation bar with response to the tap of the tab, but I want AngularJS only to toggle the active/inactive of the tab, and don't want AngularJS to stand in anything others, which I want Node to manage.
So here's my code in Angular:
"use strict";
var MyApp = angular.module("MyApp", ["ngRoute"]);
MyApp.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider) {
$routeProvider.
when("/contact", {controller: MyCtrl}).
when("/blog", {controller: MyCtrl});
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix("!");
}]);
And controller code:
function MyCtrl($scope, $routeParams, $location) {
$scope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};
}
And HTML code:
<div class="collapse navbar-collapse" ng-controller="MyCtrl">
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/')}">Home</li>
<li ng-class="{ active: isActive('/blog')}">Blog</li>
<li ng-class="{ active: isActive('/contact')}">Contact</li>
</ul>
</div>
However, when I tap any tabs from within my Chrome browser, the toggle can work properly - for example, when I tap Blog tab then it's active in Bootstrap 3 navbar. However, the page doesn't make transition properly, so the actual Blog contents cannot be displayed on the screen - all that it changes is the tab toggle.
Things are even worse, that when I tap on another contents on my screen, which is outside of the control of the Bootstrap 3 navbar, then it still makes the transition broken, and the page still remains to be a pre-tapped state.
So how can I correctly make the page transition to the correct page, and have Angular to only toggle the active/inactive status of the navbar's tab? I don't use AngularJS template and want only it to control the toggle functionality.
Note that even if the transition by tap doesn't work, when I type in the URL to the window of the browser and push return key, then the transition does work properly. Weird.
Using AngularJS with ngRoute means that AngularJS will attempt to handle all your routing requirements, however you can get by without it. To leave route handling up to Node:
Do away with your ngRoute dependency and then remove your .config section altogether.
Remove $routeParams from your controller
In your pages (handled by Node) you will need to add ng-controller="MyCtrl" to your body elements.
$location should now work fine to just update your tab classes. If not, use $window.location.pathname instead.