I am completely new to AngularJS and have been stuck with this. I want to be able to conditionally display a Javascript alertbox on the page.
Suppose I want to do something like this:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<script>{{warning}}</script>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.warning = "alert('This is a warning');";
});
</script>
</body>
</html>
So I assumed this has to do with AngularJS sanitizing the string and taking out the javascript. After some googling I tried the following:
$scope.warning = $sce.trustAsJS("alert('This is a warning');");
I also tried trustAsHtml and added the script tags in the string, but neither displayed the alertbox. Could someone tell me and tell me what is going wrong?
it should actually be like this:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.name = 'Superhero';
if ($scope.name==='Superhero') {
alert("hello");
}
}
if you want the alert to be shown conditionally by a changing model on view try something like this:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.name = 'Superhero';
$scope.$watch('name', function(newVal, oldVal) {
alert("hello");
})
}
now every time you will change the 'name' model in your view, the alert will pop-up
refer to the doc for more information about watches
You want $scope.warning to be a function, not the result of the execution of one nor a string.
$scope.warning = function () { alert('This is a warning'); };
That way it can be called later in your view : warning() should display the alert.
Alternatively, since alert is a function, you may just want to use it as $scope.warning :
$scope.warning = alert;
+
warning('this is a warning')
will produce the same result.
Related
jsp page
<!DOCTYPE html>
<html data-ng-app="myApp">
<head><title>Sample JSP Page</title></head>
<body>
<div data-ng-contoler="mainController" >
<input type="text" data-ng-model="greeting">
This is from angular {{greeting}}
</div>
<button data-ng-click="test()">doSomething</button>
</body>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/toast.js"></script>
<script src="app/app.js"></script>
<script src="app/mainController.js"></script>
<script src="app/services.js"></script>
</html>
My module myApp
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(function($logProvider){
$logProvider.debugEnabled(true);
});
My mainController.js
myApp.controller('mainController',function($scope, $http, myAppFactory) {
$scope.greeting = null;
$scope.greeting = "Jo jo jo it worked!!!!";
$scope.test = function test(){
var v= "asddas";
myAppFactory.test().success(function(date){
var a = data;
})
}
});
My service.js myAppFactory
myApp.factory('myAppFactory', function($http) {
var factory = {};
factory.test = function(){
return "test";
}
return factory;
});
When i press the doSomething button it should go to scope.test
The problem is that the controller is not available.
When i start eclipse, and go to the page on chrome, press f12
i can find the contoller with my code in it, but it never runs.
On start the "greeting" is set to be:
$scope.greeting = null;
$scope.greeting = "Jo jo jo it worked!!!!";
But on the page it is blank, on f12 i see with breakpoints that the code
never worked.
The input field with the data-ng-model="greeting"
is working fine. When i go to the page and write something in it
it is instantly displayed on change.
All files are loaded on the debug window. app, mainController and service.
On load the pages gets all files with status 200 OK
But i cant enter with breakpoints in the mainController.
change typing mistake
<div data-ng-contoler="mainController" >
to
<div data-ng-controller="mainController" >
Hope it will work.
I am calling a function from the controller scope, but in the console the values are printed three times. Why is this happening?
SOURCE
<!DOCTYPE html>
<html ng-app="myModule" >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-init="priceList='promo03,promo04'">
<div ng-controller="PricingController" >
{{splitArray()}}
</div>
<script>
var myModule = angular.module('myModule',[]);
myModule.controller('PricingController',['$scope', function($scope){
$scope.priceString = $scope.priceList;
$scope.array = [];
$scope.splitArray= function(){
console.log($scope.priceString);
$scope.array = $scope.priceString.split(",");
console.log($scope.array[0]);
console.log($scope.array[1]);
};
}]);
</script>
</body>
</html>
CONSOLE OUTPUT
promo03,promo04
promo03
promo04
promo03,promo04
promo03
promo04
promo03,promo04
promo03
promo04
Expected Output
promo03,promo04
promo03
promo04
This is called for every digest loop of Angular.
If you keep your program running, you'll have even more logs.
To prevent it, call your function INTO your controller, not into a binded value into your html.
For instance :
$scope.splitArray= function(){
console.log($scope.priceString);
$scope.array = $scope.priceString.split(",");
console.log($scope.array[0]);
console.log($scope.array[1]);
};
$scope.splitArray();
I am new to angular JS. I wrote a bit of angular code.
i have defined controller code also.Can anybody tell me why i cannot get scope variable value?
Any thing i missed ?
HTML:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
</head>
<!--this above is external java script
file my controller is not working,
what problem i am facing ?-->
<body>
<!-- the below is ng-controller -->
<div ng-controller="HelloCtrl">
say hello to : <input type="text" ng-model="name"/>
<h1> Hello, {{name}}! </h1>
</div>
Script:
<script>
var HelloCtrl = function ($scope) {
$scope.name = 'World';
}
</script>
</body>
</html>
you should define your app and your controller like this :
var myApp = angular.module("myApp", []);
myApp.controller("HelloCtrl", function ($scope) {
$scope.name = "world";
});
You are missing var myApp = angular.module('myApp',[]);
Your script should look like:
<script>
var myApp = angular.module('myApp',[]);
var HelloCtrl = function ($scope) {
$scope.name = 'World';
}
</script>
Working example. Depends on angular version. :)
Trying to do below:
(a) Embedded a web browser control inside a winform.
(b) Pass a string data from winform control to webbrowser via Invoking a method in JS.
This JS method further calls the angularJS controller. Call is successful. However, the controller which is used in view does not gets updated.
Snippet below:
Invoking side C# winform snippet:
string testString = "testing";
webBrowser2.Document.InvokeScript("InvokeJSPassingTestString", new object[] { testString });
HTML Side.
<html ng-app="ManagerApp">
<head>
<meta charset="utf-8" />
<title></title>
<script src="Scripts/angular.js"></script>
<script type="text/javascript">
var angularApp = angular.module('ManagerApp', []);
angularApp.controller('ManagerCtrl', ['$scope', function ($scope) {
$scope.customParams = {};
$scope.updateCustomRequest = function (data) {
$scope.customParams.value = data;
alert("$scope.customParams.value :" + $scope.customParams.value);
};
}]);
function InvokeJSPassingTestString(data) {
var dom_el = document.querySelector('[ng-controller="ManagerCtrl"]')
var ng_el = angular.element(dom_el);
var ng_el_scope = ng_el.scope();
var test = ng_el_scope.updateCustomRequest(data);
}
</script>
</head>
<body ng-controller="ManagerCtrl">
Passed parameter from winform to JS to angularJs is as below:
{{ customParams.value }}
</body>
</>
In above snippet - I get the alert but the view {{ customParams.value }} does not gets updated.
Any inputs appreciated.
You code is running outside the angularjs digest cycle, so you need to start a new digest cycle after changing data
$scope.updateCustomRequest = function (data) {
$scope.$apply(function () {
$scope.customParams.value = data;
alert("$scope.customParams.value :" + $scope.customParams.value);
});
};
How to update bindings
I'm learning AngularJs but I cant make it works.
I read about the digest cycle but it is not clear for me.
It's obvious that this code fails because enter in a infinite loop, but I dont know how to fix it.
Could someone help me?
<!DOCTYPE html>
<html lang="eng" ng-app="test">
<head>
<title>Learning Angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.js"></script>
<script type="text/javascript">
var app = angular.module('test', ['ngRoute']);
app.factory('visitCounterService', function () {
var counterService = function() {
var _count = 1;
var counter = function() { return _count++; };
return { counter: counter }
}();
return counterService;
});
app.service('homeModel', ['visitCounterService', function(visitCounterService){
this.getTitle = function() {
var n = visitCounterService.counter();
return "Welcome to this awesome demo. You are the visitor n° " + n;
};
}]);
app.controller('homeController', ['$scope', 'homeModel', function($scope, homeModel) {
$scope.home = homeModel;
}]);
</script>
</head>
<body ng-controller="homeController">
<h3>{{home.getTitle()}}</h3>
</body>
</html>
Thanks in advice!!!
Angular registers an implicit $watch on the home.getTitle() expression. This expression will get called at least twice because angular wants to check if the model has stabilized.
Your code returns a different string everytime home.getTitle() is called so angular continues digesting until it reaches the max digest cycles limit.
Try:
$scope.homeTitle = homeModel.getTitle();
and
<h3>{{homeTitle}}</h3>