Am new to angular js, is it possible to create multiple controller in single module?
<body ng-app="birth" >
<div ng-controller="learnerToSurvive" ng-show="$learn">
<p>xxx</p>
<button ng-click="start">Let's Begin</button>
</div>
<div ng-controller="startToSurvive" ng-show="$begin">
<button ng-model="$CPU"> VS CPU </button>
<button ng-model="$multiplayer"> Multiplayer</button>
<div ng-show="$options">
<label for="two">Two</label><input type="radio" id="two" ng-model="$players" name="multi" text="two"/>
<label for="three">Three</label><input type="radio" id="three" ng-model="$players" name="multi" text="three"/>
<label for="four">Four</label><input type="radio" id="four" ng-model="$players" name="multi" text="four"/>
</div>
</div>
<div ng-controller="surviveBegins" ng-show="$play">
<canvas id="survival" style="height: 300px, widht:500px">
</div>
<div ng-controller="death" ng-show="$over">
</div>
</body>
This is pretty simple to achieve with $rootScope although this is not recommended.
I have provided a jsfiddle for my example:
http://jsfiddle.net/dn4e4j01/1/
In my opinion, ui-router would be a much better approach:
https://github.com/angular-ui/ui-router
Yes, it is.
If those controllers are properly defined in your Javascript files, there should be no problem.
Though, based on your example, maybe you need something like ui-router to go from one state to another.
Related
This is what I gotta deal with:
<nf-field>
<div id="nf-field-2-container" class="nf-field-container lastname-container label-above ">
<div class="nf-before-field">
<nf-section></nf-section>
</div>
<div class="nf-field">
<div id="nf-field-2-wrap" class="field-wrap lastname-wrap nf-fail nf-error" data-field-id="2">
<div class="nf-field-label">
<label for="nf-field-2" class="">Last Name <span class="ninja-forms-req-symbol">*</span> </label>
</div>
<div class="nf-field-element">
<input id="nf-field-2" name="nf-field-2" class="ninja-forms-field nf-element" type="text" value="">
</div>
</div>
</div>
<div class="nf-after-field">
<nf-section>
<div class="nf-input-limit"></div>
<div class="nf-error-wrap nf-error">
<div class="nf-error-msg nf-error-required-error">This is a required field.</div>
</div>
</nf-section>
</div>
</div>
</nf-field>
Please notice the <nf-field> tag. It isn't HTML and has nothing I can use to style it with, regarding what type of input it is, ie. text, textarea, etc.
I have no previous experience of backbone.js and all the javascript by Ninja Forms is minified, so I don't know where to even begin with all that. This is what I did come up with:
(function ($) {
$(window).load(function(){
$('.nf-field-container').unwrap('nf-field');
});
})(jQuery);
This javascript is placed and the very bottom of the page, just before </body>. My excitement was short lived when I discovered that for some reason it only works on hard reload (at least when I develop on localhost).
The whole form is wrapped in a div that has the class .nf-form-cont (or just create it if there isn't).
Your JS should look like this:
(function ($) {
$(window).load(function(){
// Remove unnecessary NF mark ups
$('.nf-form-cont').find("nf-field").contents().unwrap();
$('.nf-form-cont').find("nf-fields-wrap").contents().unwrap();
$('.nf-form-cont').find("nf-section").contents().unwrap();
$('.nf-form-cont').find("nf-errors").contents().unwrap();
});
})(jQuery);
I have a page in my mobile app where I have a segment control with 6 options. I want the user to be able to click any of those options and see that content. The problem is, I don't want the user to have to click the back button multiple times to go back through the pages. Is there a way to override the location the back button will navigate to? I'm using OnsenUI/
<div class="navigation-bar bar">
<div class="navigation-bar__center">
<div class="button-bar">
<div class="button-bar__item">
<input type="radio" name="navi-segment-a" checked>
<div class="button-bar__button">
<div class="animated fadeIn">1</div>
</div>
</div>
<div class="button-bar__item">
<input type="radio" name="navi-segment-a">
<div class="button-bar__button">
<div class="animated fadeIn">2</div>
</div>
</div>
...
</div>
</div>
</div>
Assuming you are using version 2, the following documents will aid you:
https://onsen.io/v2/docs/js/ons.html#method-setDefaultDeviceBackButtonListener
This is commonly utilized like this:
ons.ready(function () {
ons.disableDeviceBackButtonHandler();
document.addEventListener('backbutton', function () {}, false);
});
Feel free to put in the empty function whatever code you want or a call to your navigation function.
Why don't you use an ons-tab-bar (or create something like it) and change its style to create your 6 segment option?
https://onsen.io/v2/docs/js/ons-tabbar.html
I was looking for a angular/bootstrap non javascript solution to have a collapsible bootstrap column..
Here's what I came up with when I couldn't find another solution online.
It was important to me to not use jquery (don't want to clutter up my controller with UI stuff)
It's not rocket science, but I spent a while looking for a bootstrap solution and came up dry.
<button ng-click="showAddDiv = !showAddDiv">Show</button>
<div class="container-fluid">
<div class="row">
<div class="material-color-primary-1 col-xs-12" ng-class="{true:'col-lg-8', false:'col-lg-12'}[showAddDiv]" ng-init="showAddDiv = false">
</div>
<div class="material-color-secondary-1" ng-class="{true:'col-xs-12 col-lg-4', false:'hidden'}[showAddDiv]">
'add div'
</div>
</div>
</div>
I am trying to load angular inline templates as follows:
<ng-include src="templateId"></ng-include>
Here is the inlined template:
<script type="text/ng-template" id="needs.html">
<div class="form-group">
<div class="col-lg-6">
<div ng-repeat="need in needs" class="hidden-radios">
<input type="radio" id="{{need}}" name="needs" ng-required="true" ng-model="advertisement.need" ng-value="need"/>
<label for="{{need}}" class="col-lg-6">
<span class="block-span">
{{ need }}
</span>
</label>
</div>
</div>
</div>
</script>
and the relevant portion from the controller:
$scope.focusNeed = function(){
console.log('focusNeed');
$scope.templateId='needs.html';
};
See codepen here: http://codepen.io/balteo/pen/ogBBXZ?editors=101
The issue I have is that the app tries to load the template by issuing request on the server instead of looking at the inline templates.
Can anyone please help?
That is because your template is out of scope. Place <script type="text/ng-template" id="needs.html"> inside ng-app and it will work.
In real world ng-app is on the body. Butin codepen you cannot do that. That is why you'd better use plunker.
I am building a wizard in angular using the angular-ui bootstrap modal component.
In my main page, I am already using ng-views for navigation.
The goal is to create a modal wizard on one of these pages. As far as I can see,
nested ng-views are not supported. If possible, I would like to keep each step of
the wizard as an external resource.
A terrible way to accomplish this at the moment is something to this effect:
<div id="wizardModal" class="modal hide">
<div class="modal-header">
<div ng-show="isCurrentStep(1)">
<p>Step1 header</p>
</div>
<div ng-show="isCurrentStep(2)">
<p>Step2 header</p>
</div>
<div ng-show="isCurrentStep(3)">
<p>Step3 header</p>
</div>
</div>
<div class="modal-body">
<div ng-show="isCurrentStep(1)">
<p>Step1 body</p>
</div>
<div ng-show="isCurrentStep(2)">
<p>Step2 body</p>
</div>
<div ng-show="isCurrentStep(3)">
<p>Step3 body</p>
</div>
</div>
<div class="modal-footer">
<div ng-show="isCurrentStep(1)">
<p>Step1 footer</p>
</div>
<div ng-show="isCurrentStep(2)">
<p>Step2 footer</p>
</div>
<div ng-show="isCurrentStep(3)">
<p>Step3 footer</p>
</div>
</div>
</div>
Obviously, the above is unacceptable and will create maintenance nightmares.
Is there a clean approach to accomplishing the same effect?
Using ng-include worked like a charm, thanks.
You can find a tutorial about creating a wizard-style app using ng-view and ngRouter here.
I believe this approach is much better since you can have individual controllers per step that inherit the scope from the host form thus keeping all the data but separating the logic.