I have an angular web application. When run it on Chrome and FireFox it works like a charm, but when I test it on IE 11, after a while all my inputs(type=text) and textareas aren't editable. If I edit the textarea from the inspector and asign the attribute maxlength it works. The time is random, I don't have any errors in my console log. I have searched for some answers and didn't find much beside Microsoft IE11 Install Fixes. Any advice ?
<div class="container" ng-app="myApp" ng-controller="MainCtrl">
<h2 ng-bind="someVar"></h2>
<input type="text">
<textarea></textarea>
</div>
var app = angular.module('myApp',[]);
app.controller('MainCtrl',['$scope', function($scope){
$scope.someVar = 'Angular works';
}]);
Related
I eventually need to create a select box with 4 options - Module 1 to 4. When an option is selected I need to send the number which was selected to the controller so that it can return different datasets for a chart.
That is the end goal, however experimenting with different code pens I simplified my problem down to just trying to get a variable from an input box.
I can get the value to appear on the template but I can not access it in the controller. How can I make the function in the controller work with the passed input data?
html
<body ng-app="plunker" ng-cloak>
<div ng-controller="MainCtrl">
<h1>Hello {{name}}</h1>
<p>Start editing and see your changes reflected here!</p>
</div>
<input placeholder="Module" type="text" ng-change="moduleChange(myModule)"
ng-model="myModule" ng-model-options="{debounce: 1000}">
{{myModule}}
</body>
script.js
angular.module('plunker', []).controller('MainCtrl',
function($scope) {
$scope.name = 'Plunker';
$scope.moduleChange = function(myModule) {
alert(myModule);
console.log(myModule);
$scope.name = myModule;
}
});
I thought that I would get an alert every time I changed the input but nothing is happening. nothing is logged to the console and the $scope.name variable appears to not change.
Where am I going wrong? Thx
Also any pointers for making it work inside a select box would be great too!
plunkr
Move ng-controller="MainCtrl" to the outer element (thats the reason why the function was not fired):
<body ng-app="plunker" ng-controller="MainCtrl" ng-cloak>
You don't need to pass the value into the function, you have the value with ng-model:
<input placeholder="Module" type="text" ng-change="moduleChange()" ng-model="myModule" ng-model-options="{debounce: 1000}">
$scope.moduleChange = function() {
alert($scope.myModule);
console.log($scope.myModule);
$scope.name = $scope.myModule;
}
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.
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 have the following radio input element where I am using ng-disabled to enable/ disable it based on a scope variable in my app controller. It works perfectly on all browsers except IE 11. Can someone please tell me what I am missing / doing wrong here? I've researched the web but couldn't find any clue to what I might be doing wrong here. Thanks
<input type="radio" id="select1" name="select1" value="{{payoption1}}" ng-model="order.payoption1" ng-disabled="clientDataloaded"/>
In controller:
$scope.clientDataloaded = true; //this value change to false once client data is fully loaded...
Note: I am using Angular 1.2.6
Which version of your IE (My IE 11.321.14393.0 on window 10)
I am trying to recreate your issue but cannot
Here is a live example which I tested all browsers and it works fine
you can update your IE or find another system with diffrent OS Win7/Win8.. for trying
(function() {
var app = angular.module('myApp', []);
app.controller('myController', ['$scope', function($scope) {
$scope.clientDataloaded = true;
}]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<button ng-click="clientDataloaded = !clientDataloaded">Enable/Disable</button>
<input type="radio" id="select1" name="select1" value="{{payoption1}}" ng-model="order.payoption1" ng-disabled="clientDataloaded"/>
</div>
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