I am new in angular js.Creating a stuff using angular js.Using radio button to select item .But this not running in my sysytem. http://jsfiddle.net/NfPcH/559/. copyied code form jsfiddle.
It contain the file
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.0.7/angular.min.js" type="text/javascript"></script>
Got output
{{ showStatus() }}
Any body say the reason of not running the code in my system?
editable-radiolist and e-ng-options are not standard angular directives.
Click on 'External Resources' on the left - u'll see that this example also uses:
xeditable.js
bootstrap.min.css
xeditable.css
checklist-model.js
Related
I am using angular material V1.1.1 and angular js version 1.3.13.I have used md-select to select a value from dropdown. When I click on md-select , it shows the md-options value but hangs the whole screen and i am unable to click anywhere in the page as it adds a md-scroll-mask .I am not sure what causes the problem.
Any help would be appreciated
Make sure you have loaded the angular-aria and animate references correctly
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
<script src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
<script src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>
DEMO
I am using angular with sightly. So I have angular html template surrounded by script tag, which also has sightly attributes like data-sly-resource.
Below example code will give you clear idea.
<script type="text/ng-template" id="example.html">
<section data-sly-resource="${ #path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" >
<div ng-include="'private/textOverImage.html'" data-sly-test="${!wcmmode.edit}"></div>
</section>
</script>
It works fine in non-edit mode , but in edit mode, I can not author data-sly-resource part. It looks like <script> tag is not letting it work roperly because when I remove <script> tag ,than I can author it.
And removing script tag is not an option as well.
So how can I stop script tag form breaking sightly functionality in edit mode?
I ended up doing repetition of code , one for author mode and other for non edit mode.
Below is close resemblance of my solution.
<section data-sly-resource="${ #path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" data-sly-test="${wcmmode.edit}" >
<div ng-include="'private/textOverImage.html'"></div>
</section>
<script type="text/ng-template" id="example.html" data-sly-test="${!wcmmode.edit}">
<section data-sly-resource="${ #path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" >
<div ng-include="'private/textOverImage.html'"></div>
</section>
</script>
As you can see in above code, what to show and when works via data-sly-test="${wcmmode.edit}".
I also tried to to create sightly template for redundant code and than try data-sly-use but now, it works in author mode but sightly can't put template inside <script> tag even though I used # context='unsafe'
There is a workaround based on the Sightly Reference
Put the markup inside a separate html file say mymarkup.html parallel to mycomponent.html
In Component HTML file (e.g mycomponent.html) use <script type="text/ng-template" data-sly-include="mymarkup.html"></script>
In mymarkup.html we can use Sightly tags normally and those would be evaluated/executed normally, we would not even need to specify the # context for variables we would read using use API. The final markup rendered by component mycomponent.html when dragged to page would render something like this below
<script type="text/ng-template">
//mymarkup.html evaluated content here
</script>
In your script tag you could add data-sly-unwrap="${wcmmode.edit}"
This will remove script tag in edit mode allowing you to edit included components but in any other mode the script tag gets rendered.
I found the following mention in Netcentric's AEM Sightly Style Guide:
Then, because the HTML grammar ignores elements located inside a
< script > or < style > elements, no block statement can be used within
them.
Although it's not explicitly stated in the Sightly spec, it makes sense. So your fix is right.
the angular md-menu-bar demo shows a nested Menu under new. Check the code from the demo on codepen here: https://material.angularjs.org/latest/#/demo/material.components.menuBar
As you can see, from the codepen, the nested menu opens on hover, but in the HTML you can see the button element has a ng-click="$mdOpenMenu()" function. I cannot see how to this even works. Am also failing to get the side arrow to appear for the submenu.
Are people able to replicate this demo? My code is a follows:
md-menu-bar
md-menu(md-position-mode="target-right target", md-offset="0 40", width="4")
button.ts-chart-icon.refresh-icon.glyphicon.glyphicon-certificate(ng-click="$mdOpenMenu()", md-menu-origin)
md-tooltip(md-delay="0") Add Overlay
md-menu-content.ts-menu-content(width="5")
md-menu-item(md-menu-align-target)
md-button(disabled="disabled", ng-if="!chartConfig.series") Add 50D Moving Average
md-menu.nested-menu(ng-if="chartConfig.series")
md-button(ng-click="$mdOpenMenu()") Add 50D Moving Average
md-menu-content(ng-show="chartConfig.series", width="5")
md-menu-item(ng-repeat="s in chartConfig.series")
md-button(ng-click="handleAdd50DMA_(s)") {{ s.name }}
I upgraded from angular-material 0.10.1 to 0.11 and it is working fine now.
I am using Angular UI Bootstrap http://angular-ui.github.io/bootstrap/. I have two questions:
I followed the example given at angular-ui.github.io, there they use
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js">
but I don't want to use the CDN so I downloaded Angular UI and added it to my project. How to include it into my code?
I did add
['ui.bootstrap'] to my angular.module, but it's not working until I add the above script code.
I'm using <tabset> to create two tabs, contacts and group. For
example, a user is in the Group tab, he wants to add members to an existing group, so if he clicks the Add Member button, I want to navigate to the Contacts tab automatically.
I thought of using document.getElementByTagName() inside my
controller. Will it work? And what is the Angular way to click
something programmatically.
Question #1:
<script src="folder_of_js/ui-bootstrap-tpls-0.10.0.js"></script>
Question #2:
You don't use document.getElementByTagName() with AngularJS, if you want to navigate to a tab while you are in another tab's content, an example might be the following:
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}">
{{tab.content}}
<button class="btn btn-default btn-sm" ng-click="tabs[2].active = true">Select third tab</button>
</tab>
</tabset>
As you can also see in this plunker, I added a button that navigates to the third tab whenever you click it.
The script file is probably not loaded by the browser. You have to add a script tag pointing to where the file is in your project. For example, if the script is placed in the folder /scripts/lib/:
<script src="/scripts/lib/ui-bootstrap-tpls-0.10.0.js" />
One of the golder rules of AngularJS is to never, for any reason, referrence the DOM (i.e. an HTML element) from a controller. So while document.getElementByTagName() will technically work, I would advice against it.
In angular, you really don't click things programmatically. The common way is to bind something in your HTML to a variable in the $scope, either by curly brackets ({{someVariable}}), or by directives such as ng-class, ng-bind etc. Then you change that variable in $scope, and the HTML changes to reflect that. Is there a variable in $scope which determines which tab is open? If so, you can just change that variable, and it should work automagically.
I am attempting to create a SPA using AngularJS as the main view for my website. I'm using ServiceStack on the server-side and can therefore cleanly serve HTML or JSON requests depending on what's accessing it. My main concern is the use of script blockers, preventing AngularJS from rendering the page properly. So far my main way of working is to render static pages, and inject a small script that redirects to the AngularJS-powered pages if it detects if Javascript is enabled. This works great since every URL works fine when the user begins at the static pages, but I've ran into a couple of snags.
Browsing to a link which includes the "?View=SPA" breaks the page if JavaScript is disabled
This causes the first page loaded to be loaded twice.
I'm looking for an alternative, but so far I haven't found any clean solutions. I was thinking about including the "?View=SPA" as a POST variable, but I'm still iffy on that implementation.
Any thoughts?
Instead of redirecting to an other page, I would implement both cases in the same HTML File as follows:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<style>.hideIfNoScript {display: none}</style>
</head>
<body ng-app ng-init="msg = 'hello world'">
<input class="hideIfNoScript" ng-model="msg" />
<p class="hideIfNoScript">{{msg}}</p>
<noscript>
<p>Content without javascript</p>
</noscript>
<script type="text/javascript">
var myEl = angular.element( document.querySelectorAll( '.hideIfNoScript' ) );
myEl.removeClass('hideIfNoScript');
</script>
</body>
</html>
The CSS Class hideIfNoScript in the head section makes sure that all HTML Tags with this class are never shown to the user, if javascript is disabled.
The noscript tag shows the alternative content.
If javascript is enabled, the little script at the end of the body section makes those elements visible. And in this case, the contents of the noscript tag are hidden.
Browsing to a link which includes the "?View=SPA" breaks the page if JavaScript is disabled
Hide those links by default:
a[href*='SPA'] { display: none; }
This causes the first page loaded to be loaded twice
Use a cookie on a browser-check page which loads the first page in an iframe or redirects to it to avoid this.
References
Track Non-JavaScript Visits In Google Analytics