I'm taking baby steps with Angular and writing simple stuff and testing across browsers, I have a simple script to bind a menu against a JSON string array. I want to do the whole Angular MVC instead of Javascript DOM manipulation.
In my tests I can see a strange behaviour as to the positioning of the top of the menu in IE dependent upon which item is selected. Anyone know how to fix this? I would like to use an Angular friendly solution, like Bootstrap?
Menu looks good in Firefox and Chrome.
<html ng-app="myNoteApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-controller="myCarSelector">
<h2>Menu</h2>
<p>Make of car : <span ng-bind="selectedCarMake"></span></p>
<select ng-model="selectedCarMake" ng-options="val for val in carmakes"></select>
</div>
<script>
// was in separate file but pasted in for demo purposes
var app = angular.module("myNoteApp", []);
</script>
<script>
// was in separate file but pasted in for demo purposes
app.controller("myCarSelector", function ($scope) {
$scope.selectedCarMake = "BMW"; // default value
$scope.carmakes = ["Audi", "BMW", "Volkswagen"];
});
</script>
</body>
</html>
I like to accept answers and then move on to next question.
Here is a screen grab of the problem in IE 11
It seems browser default behaviour.
Related
I'am using fullcalender and need to change some navigation buttons with AngularJS. I do not have much experience with AngularJS so the JS Code would be somthing like this:
var filter = $(".fc-filter-button");
filter.html("<i class='fas fa-filter'></i>");
filter.attr("id", "dropdownFilterButton");
But how can i archive this and some other usual JS/JQuery Tasks with AngularJS. I know i can use JQuery too but want to do it in the right Angular way.
I tried something like this:
element[0].getElementsByClassName('fc-filter-button').html("<i class='fas fa-filter'></i>")
or
var queryResult = element[0].querySelector('.fc-filter-button');
angular.element(queryResult).html("<i class='fas fa-filter'></i>")
How can i make these changes without touching the fullcalender code itself.
Take a look at the NgSanitize module "The ngSanitize module provides functionality to sanitize HTML".
Here's an basic example which should get you going in the right direction
angular.module('app', ["ngSanitize"])
.controller('myCtrl',function($scope){
$scope.content = "<p>The initial html</p>";
$scope.changeHtml = function(){
$scope.content = "<h3>The changed html</h3>";
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular-sanitize.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<button ng-click="changeHtml()">Change html</button>
<div ng-bind-html="content">
</div>
</div>
I was trying to write a simple Angular app, when I came upon a problem. My perfectly simple and short boilerplate code runs entirely fine in a Codepen, but it fails to work in a JSFiddle. The snippet I created below works fine as well, but I cannot figure out why it does not work in JSFiddle. Could anyone point out what the problem is?
Codepen link: http://codepen.io/chalarangelo/pen/YWdvBV
JSFiddle link: https://jsfiddle.net/chalarangelo/1d12hm5f/1/
Code snippet:
var app = angular.module('myApp', []);
app.controller('myController', [
'$scope',
function($scope) {
$scope.demoText = 'AngularJS: This is some demo text!';
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController">
<p>
{{ demoText }}
</p>
</div>
</div>
You should click the JAVASCRIPT button and select an Angular version under the FRAMEWORKS & EXTENSIONS dropdown, instead of including it as an external resource.
To fix your problem, you must select the LOAD TYPE as No wrap - in <head>.
I tried to run this very simple input test on my SharePoint 2013 site. It worked well at first but after some other experimenting within same page in different content editors (I did not touch the input test) it broke and now shows only the search with double brackets. I have tried implementing this in Content editor and script editor but nothing seems to work. It only shows text and {{search}}
<script src=".../SiteAssets/javascript/angular.min.js"></script>
<script src=".../SiteAssets/javascript/jquery-2.1.4.min.js"></script>
<div>
<input type="text" ng-model="search">
<p>you're searching for: {{search}}</p>
</div>
Also I can't figgure out why the simples Hello World won't show as it should. It also shows the double brackets.
var app = new angular.module("mainApp", []);
app.controller("HelloController", function ($scope) {
$scope.greeting = 'hello';
});
angular.bootstrap(document, ['mainApp']);
Above is controller and below is the .html.
<script type="text/javascript" src=".../SiteAssets/javascript/angular.min.js"></script>
<script type="text/javascript" src=".../SiteAssets/javascript/HelloController.js"></script>
<div ng-app='mainApp' ng-controller='HelloController'>
<p>{{greeting}}, World</p>
</div>
I have tested the Minimal download strategy features effect on these problems but it does not make any difference.
I hope someone can help!
BR,
Noora
You need to bootstrap you angular app on angular.element ready after DOM is loaded properly.
Code
angular.element(document).ready(function() {
angular.bootstrap(document, ['mainApp']);
});
You should call angular.bootstrap() after you've loaded or defined
your modules. You cannot add controllers, services, directives, etc
after an application bootstraps.
Doc Link
I design my pages with angularjs like following
<html>
<head></head>
<body>
<ng-view></ng-view>
<ng-include="'footer-tpl.html'">
</body>
</html>
so whenever navigate to any pages will just change the ng-view, but now I want to have a
page without the <ng-include="'footer-tpl.html'">. How to do that?
I just realized you can use ngHide with ngInclude:
http://plnkr.co/edit/BBpfQBRgtr7tAK6iFRTR?p=preview
HTML
<div ng-include="'footer.html'" ng-hide="hideFooter"></div>
JavaScript
angular.module('test', []).controller('test', function ($scope) {
// TODO set this to true to hide the footer, if you don't set it, it stays visible
//$scope.hideFooter = true;
});
When this patch for ngIf makes it into a release, you can use it in place of ngHide. It seems like it'll prevent footer.html from even being loaded if you hit the right view, but I'm not totally sure on that.
How do I make a jsfiddle out of the following code:
<html>
<head>
</head>
<body>
<div ng-app ng-controller="MainCtrl">
<ul>
<li ng-repeat="num in nums">
{{num}}
</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<script type="text/javascript" charset="utf-8">
function MainCtrl($scope) {
$scope.nums = ["1","2"];
}
</script>
</body>
</html>
My non working attempt: http://jsfiddle.net/zhon/3DHjg/ shows nothing and has errors.
You need to set some things up in jsFiddle for this to work.
First, on the left panel, under "Frameworks & Extensions", select "No wrap - in <body>".
Now, under "Fiddle Options", change "Body tag" to <body ng-app='myApp'>
In the JS panel, initiate your module:
var app = angular.module('myApp', []);
Check it out: http://jsfiddle.net/VSph2/1/
#pkozlowski.opensource has a nice blog post about how to use jsFiddle to write AngularJS sample programs.
You've defined your controller in a function scope that is not accessible to angular (angular is not yet loaded). In other words you are trying to call angular library's functions and helpers like below example before getting angular library loaded.
function onload(){
function MainCtrl(){}
}
To resolve this, switch your angular load type to be No wrap - in <body> like shown in screenshot.
here is a working example in jsfiddle
Click JAVASCRIPT button, choose angular version and place where u want include loaded script:
Then click HTML button and add ng-app in body tag. Its all:)
I am writing my answer for those who land on this page , I was used to use ng-module directive but in jsfiddle after half an hour I realized that ng-module is not allowed and you see no error , and when changed that ng-module to ng-app fiddle worked very well .I just wanted to share this .And no wrap (body) is required too.
<div ng-app="appX" ng-controller="appCtrl">
<p>{{greeting}}
</p>
</div>
var app=angular.module("appX",[]);
console.log(app);
app.controller("appCtrl",function($scope){
$scope.greeting="Hello World";
});
https://jsfiddle.net/cloudnine/trgrjwf1/7/
Since Angular 1.4.8 has been chosen by JSFiddle as the top option for Angular V1 in its JAVASCRIPT setting panel, more restriction applies: both ng-app and ng-controller should be declared in HTML to make it work.
Sample HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="sample" placeholder="type something here...">
<span>{{sample}}</span>
</div>
Sample JS:
angular.module('myApp', [])
.controller('myCtrl', function($scope) {});
https://jsfiddle.net/y170uj84/
Also tested with the latest Angular 1.6.4, by setting as External Resource.
For little experiments in angular 5, you can use https://stackblitz.com/.
This site is used in angular documentation to run live demo. For example, https://stackblitz.com/angular/eybymjopmav