I am using Angular JS with Onsen UI framework. In any template to "change page" I just need to put an ng-click calling the function:
ons.screen.presentPage('mypage.html')
I need to do the same into a controller (javascript code), in other words I want to change page without clicking on links.
Thanks
To call any function defined into the Screen Service I just needed to add $rootScope before ons.screen.presentPage('mypage.html').
$rootScope.ons.screen.presentPage('mypage.html')
Call the function normally, as you would do outside ng-click.
If you did load onsenui.js, it shall work seamlessly.
Related
In my view i have the following actionlink
#Html.ActionLink("Edit", "Edit", new {click="TestFunction()"})
instead of calling a js function i need to call a function in the Angular controller's $scope. Assume the above TestFunction() is in the $scope then i need to use the ng-click instead of click. But .net wont let me use ng-click as anonymous property so rewriting
#Html.ActionLink("Edit", "Edit", new {ng-click="TestFunction()"})
is not possible, so how do i add the function TestFunction() in angular controller to the actionlink
#Html.ActionLink is Server side MVC implementation for generating Link on your HTML page.
onclick is javascript implementaiton to generate click event and call function available in DOM as mentioned in html.
ng-click is angular dir. implementation to generate click event and call function under $scope as mentioned in html.
for razor-c# , ng-click is an invalid syntax you should use ng_click
to create angular click event for ActionLink Only.
If you are building a link that doesn't involve server stuff AND you are building app that uses AngularJS I would suggest to render html a tag.
<a href="javascript:void(0);" ng-click="...">
If you are anyway needs server implementation , create partial view (with actionlinks you want to use) that returns html and use angular directive to place in your DOM.
Hope this helps...
Suppose I am customizing an angularjs bootstrap carousel and making it as a directive. I want to customize the current function that the ng-click calls on each left/right arrow so it calls a custom function before the original function defined in the bootstrap. I know calling multiple functions in ng-click can be done by
ng-click = "customFunction();originalFunctionFromBootstrap()"
But, in angular carousel, the left and right arrow is defined inside its bootstrap template and I don't want to modify the template using $templatecache.
Is there a way to add new ng-click in my controller without having to modify the template cache?
EDIT:
The current workaround that I can have is using
document.querySelector('.left.carousel-control').addEventListener('click', function(){...})
And of course this is not angular way of doing this. Plus, if I use ng-click from ng-touch, this will not be called as well. Is there a way on how to modify the ng-click?
If you inherit the scope of the directive you can save the library function in a variable and override the function with your logic. Then call the function that you saved on a variable so everything keep working.
var _superClickMethod = scope.originalFunctionFromBootstrap;
scope.originalFunctionFromBootstrap = function () {
// custom logic
_superClickMethod();
}
Other solution is to wrap the carrusel bootstrap plugin in a directive of yours. I recommend the last option.
What I ended up doing is:
document.querySelector('.left.carousel-control').setAttribute('ng-click', 'customFunction()');
$compile(document.querySelector('.left.carousel-control'))(scope);
And this solves my problem.
Background:
I have an angularjs application which displays a datetimepicker field.
Issue:
Once the page is loaded I want to run a javascript function to initialize the datepicker used in the page.
At the moment it seems that the function call that I placed at the end of the page doesn't get picked.
Note :
I use the 'bootstrap datetimepicker' from (http://eonasdan.github.io/bootstrap-datetimepicker/)
Just use the $viewContentLoaded event
$scope.$on('$viewContentLoaded', function() {
//call it here
yourFunction();
});
The only way to know when Angular is done is from inside Angular. You should wrap the code that initalizes the date picker into a directive, add binding as needed, and in a $timeout function do the JS initialization.
I am trying to write a directive that will format content for modal display (using Bootstrap classes) if given a certain parameter, and as standard view if not. I have this working for a view loaded directly, toggling on a URL param (?modal) available to $routeParams and/or $location.
I want to use this toggle-able template as a "pipe" for other templates. However, the intended content URL will never be the visible URL when used as a modal. I can't get it working when loading the view with $modal.open or ngInclude, because $routeParams/$location has data for the including page, not the included one.
I put this in a Plunker, but because Plunker also doesn't provide the URL param, the modal view isn't available.
Does Angular provide a means to change the template or templateUrl much later in the process? For example, could I use $scope, either from a controller or on the directive, itself?
Clarification: The goal here is to have one template/partial for each component, with that template used either as a standalone or a modal, based on some switch. The _modal and _alone partials in the Plunker convert the component template into the desired state.
$modal.open takes a single object parameter one of the properties of this config parameter is templateUrl
http://angular-ui.github.io/bootstrap/
So you can create the config object and open the modal with any template you need.
Dan Wahlin uses this technique for a dialog service and then in this article goes on to demonstrate a full modal service
http://weblogs.asp.net/dwahlin/building-an-angularjs-modal-service
There were a couple of issues with your code:
First of all the use $routeParams if you don't use ngRoute's $routeProvider.
In your case, it might be easier to use $window.location.search (and compare it against ?modal).
That said, in order to properly display a Bootstrap modal, you need Bootstrap's JS file (which in turn requires jQuery) and you also need to create the modal (e.g. by calling $('.modal').modal()).
Take a look at this modified demo.
For better intergration with Angular's components, you might want to look into UI Bootstrap.
I'm currently using jQuery to display modal windows, the function basically builds some HTML and then does $('#myElement').append(modalHtml);
Inside that modal HTML I have <div ng-controller="MyController">...</div> however when the modal is displayed the controller doesn't seem to get initialized. Is this because it's being added to the DOM outside of angular's scope? If so is there anyway when I run that code I could notify angular to look out for changes?
The breakdown of how it is at the moment is Angular runs loadModal() through an ng-click on an element. loadModal() calls modal(), and modal() builds the html and adds it to the DOM. Modal is in a script of just standalone helper functions.
The modal controller won't be called because you're not parsing or compiling the appended DOM code with Angular. Hence, Angular will not 'notice' this change and as a result it will not run any controllers or directives in the added DOM. The best way to solve this kind of problems is by adding a custom directive.
As you're trying to make a modal work, you could also take a look at existing modal adaptations for Angular, such as the one in AngularUI.