I am using https://github.com/localytics/angular-chosen for an angular chosen box application with remote loading as in the example.
angular.module('App', ['ngResource', 'localytics.directives'])
.controller('BeerCtrl', function($scope) {
$scope.beers = $resource('api/beers').query()
});
My controller is a controller connected to a view which only comes into play when a user clicks the edit button:
<div id='modal' ng-switch on="modal">
<div ng-switch-when="view" ng-include="'view.url'"></div
<div ng-switch-when="edit" ng-controller="BeerCtrl" ng-include="'edit.url'"></div>
</div>
This does not work (does not load options into chosen select -- options are however available and even visible in the DOM in the original "select" box).
However, when I move the ng-controller tag to the #modal div, it does work, however, it calls the resource on page load which is a waste since I only need the options loaded (many!) if the edit modal is opened.
Any help is appreciated.
Thanks
Related
Use Angular JS ui.router in project.
I have added the following state map in app.js:
.state( 'confirmCart', {
url: "/cart/confirmCart",
controller: "ConfirmCartCtrl",
templateUrl: "/ng-apps/selfEnroll/pages/confirmCart/confirmCart.html"
} )
Added a function in control.js:
$scope.reviewCart = function() {
$state.go("confirmCart");
return;
}
Added a button on home page:
<div>
<button ng-click="reviewCart()">Review Cart Plans</button>
</div>
And then set the view area div use the 'ui-view' attribute.
<div class="container">
<div ui-view></div>
</div>
$state.go() does not load the view when first click this button, but the template Url was changed in browser address field.
However, the view shows when second click.
I notice that when click fist time, the view page loaded under the browser developer tool 'Network' tab. But the view page is not showing in the window.
This view has to be displayed by the second click of the button. I am confused that.
Screenshot of the developer tools shows
Try this:
$state.go("confirmCart", {}, {reload: true});
Or this:
$state.go("confirmCart").then( () => $state.reload() )
I have a cross platform app developed using Onsen UI, Monaca and AngularJS.
I am trying to navigate to a new page from a controller when the user clicks a button on my view. I am following a solution from THIS SO post but I keep getting the error: TypeError: Cannot read property 'pushPage' of undefined at Scope.$scope.getDateAndPushPage
I have my view set up to display a listview of dates using ng-repeat and when the user clicks on any of the listview items, I get the selected date item and and use it in my controller to perform some calculations. Once this is done I need to segue to the next page to display the calculations.
My listview looks as follows and displays the list of dates stored in data:
<ul class="list">
<li ng-repeat="myDate in data" class="list__item list__item--chevron" ng-click="getDateAndPushPage(myDate.date)")>
{{myDate.date}}
</li>
</ul>
In my views controller I try and push the new page as with the the example mentioned above as per my code below:
var dateReports = angular.module("dateReportsController", []);
dateReports.controller("DateReportsController", function($scope, $http, $rootScope)
{
$scope.getDateAndPushPage = function (myDate)
{
var page = "date-report-details.html";
console.log("Page: " + page); // OK here - outputs page: date-report-details.html
console.log("My Date: " + myDate); // OK here and do calculation
$rootScope.ons.myNavigator.pushPage(page); // Error here
}
});
And finally in my index.html I have my navigator defined as:
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<!-- Usual content goes here - omitted because not relevant -->
</head>
<body>
<!-- The first page in the navigation stack -->
<ons-navigator var="myNavigator" page="login.html"></ons-navigator>
</body>
</html>
I have tried all the solutions offered on the above mentioned SO post but none seems to be working for me. I have my app setup in such a way that all controllers are split into their separate files to make it easier to manage. To this effect my main app.js file looks as follows and Im not sure is this where the issue is coming from
var app = angular.module("myApp", ['onsen', 'loginController', 'dateReportsController']);
your code is not able to find myNavigator variable. Try changing :
<ons-navigator var="myNavigator" page="login.html"></ons-navigator>
to <ons-navigator id="myNavigator" page="login.html"></ons-navigator>
and use: $rootScope.ons.$get('#myNavigator').pushPage(page);
To navigate to from page to another page, you can use the following code.
HTML
<ons-navigator var="myNavigator" page="page1.html"></ons-navigator>
In controller
$rootScope.myNavigator.pushPage('page2.html');
I 'm starting jquery migrating an application to angular, but it has made me a bit complex. I need to know if someone could help me as routing and load controllers, when login any user. There are two types of users
Students
Teachers
Each has a different menu , which in turn has different html pages. Depending on the role the user to enter then load the specific menu.
Using the jQuery load event , and changed the content which changes within a div . I would like to know how to perform this process with angular .
index.html
<html>
<head> Files ... </head>
<body>
<div id="container"></div>
</body>
</html>
student-menu.html
<div>
<div>option-1</div>
<div>option-2</div>
<div>option-3</div>
<div>option-N</div>
</div>
students-pages
option-1.html
option-2.html
option-3.html
option-N.html
teacher-menu.html
<div>
<div>option-1</div>
<div>option-2</div>
<div>option-3</div>
<div>option-N</div>
</div>
teachers-pages
option-1.html
option-2.html
option-3.html
option-N.html
Appreciate a clear explanation.
Please consider reading about including ui-router in your amazing application and learn about templateProviderusage.
As soon as you done with above things all you need is:
Create Service that will have getCurrentUserStatus() that should acquire from loaded data about user his status in your system
Depending on status configure your child views: { 'menu': { ... } } with
//somewhere above
const TEMP = {
user: 'path/to/file.tpl.html',
admin: 'path/to/admin.tpl.html'
}
//somewhere in view configuretion
...,
templateProvider (AuthService) {
return TEMP[AuthService.getCurrentUserStatus()];
},
...
Create all another pages with totally same approach of choosing needed template.
P.S. This allows you to expand list of variable templates unless your imagination will empty :D
P.P.S. Noobs way - lot of ng-include with ng-if on every view that will be changed depending on viewer.
Here is what I am trying to achieve: I have a topnav with a login button. When the login button is clicked, I want to display my login popup dialog.
Similarly, certain pages will have a giant "Register" button. I want the login popup to also appear when that button is clicked.
In order for both the topnav and other (outside) components to display the login popup, it was recommend that I create service for my login popup (See my previous question: (Separate controller from directive?)
My question is: Can someone please outline the steps I need to take in order to create this service? I'm having a bit of trouble, even after reading the documentation.
Here's what I have so far:
angular.module('myApp')
.factory('login', LoginService);
function LoginService() {
return {
showLoginPopup: function () {
// Need to show my login popup here
}
}
}
Is this correct so far? Where do I define my HTML for the login popup? Do I use the templateUrl attribute? Is there another recommended approach?
Thanks
Edit
For sake of example, let's assume my template is something very simple
<div class="login-popup">
<input type="text" id="Username" />
<input type="text" id="Password" />
<button>Submit</button>
</div>
I assume I'll need an ng-show attribute. What should this be linked to? Typically, I link it to a property of a controller... But since is initiated by a service, there is no controller object to it. What am I missing?
I have to call $route.reload(); in controller 2 addData API call so that I can get the added data in my UI. But then the text 'Data added successfully' goes away due to page refresh.
controller 1:
$rootScope.$on('reloaded', function(event, data) {
$scope.$parent.alerts.length=0;
$scope.$parent.alerts.push({type: 'success',msg: 'Data added successfully'});
});
controller 2:
$scope.add = function() {
someAPIService.addData(JSON.stringify($scope.rows)).success(function(response) {
ngDialog.close('ngdialog1');
$route.reload();
$rootScope.$emit('reloaded', "true");
});
}
HTML Part:
<section>
<div ng-controller="controller3">
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
</div>
<div class="row form-inline" ng-controller="controller2 as vm">
<!-- Table data with text fields-->
</div>
<script type="text/ng-template" id="addDataDialog">
<div id="frm" ng-controller="controller1" class="col-xm-6">
<div class="form-group">
<!-- Labels with text fields-->
</div>
<button class="ngdialog-button" ng-click="add()">Save</button>
</div>
</script>
</section>
NOTE: Both controllers are in the same JS file and they are used for the same HTML file.
As you want to only load the latest record list which is on server side. Then there is not need to use $route.reload(); after making post call. You need to only make ajax call to get the latest records list that will solve your problem. For making ajax you need to refer $http
$route.reload() is getting used only when you need to load
controller again with specified template in your $routeProvider when
condition
just a simple hint of an answer:
add a (specific) cookie (with javascript) before calling reload (use e.g Cookies lib),
read it on reload,
and then delete it
Also you may use local storage if it is available instead of a cookie using same steps:
add a specific entry in local storage, before calling reload
read it on reload
and then delete it
Another option to maintain state client-side is to use url parameters but these will not do for page reload