Angular JS two way binding

[Harshit18]

Hi 

I am referring to following link to test Angular JS code in ServiceNow :

https://developer.servicenow.com/app.do#!/training/article/app_store_learnv2_angularjs_madrid_introd...

but I am unable to implement two way binding using UI script and UI page. Instead of displaying the string entered in placeholder, it is displaying {{myVar}}. Also, the function on button Clear Text is also not getting triggered. 

I am sharing my code for UI Page & UI Script. If someone can debug my code and help me out to get the expected display as it is displaying in the link mentioned above, it will be a great help. 

UI Page: 

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </link>
<script src="x_116068_angular_a.angular_app_client_logic.jsdbx"></script> 
<div ng-app ="angularapp" ng-controller = "AngularAppCtrl as appctrl">

<input type = "text" ng-model = "myVar" placeholder = "Enter some text here"> </input>
<p></p>
<div class ="jumbotron">
<h1 class = "display-1">Hello World!</h1>
<hr class = "m-y-2"/>
<p> </p>
</div>
<button ng-click = "clearTxt()" type = "btn" class = "btn btn-primary"> Clear Text </button>
</div>

</j:jelly>

UI Script :

angular.module('angularapp',[]);
angular.module('angularapp').controller('AngularAppCtrl', function($scope) {

$scope.myVar = '';
$scope.i = 0;

$scope.clearTxt = function() {
alert("Entering the function");
$scope.myVar = '';
$scope.i++;
alert("The myVar value was cleared " + $scope.i + "times by" + g_user.userName + ".");
};
});

[seanb]

I am having a similar issue though I don't have {{myVar}} displayed on screen.  I suspect the original poster also solved that after following Omkar Mukesh Mone's tip.

Like the OP, I also have no errors in console.  I am testing in an Incognito window. 

My code will be similar though my UI script API name is shortened to prevent going over 40 characters (mentioned in lesson).  I'll put in here anyway.

UI Page

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"></link>
	<script src="x_74025_angular_ap.angular_app_client_lg.jsdbx"></script>
	
	<div ng-app="angularapp" ng-conroller="AngularAppCtrl as appctrl">
		<input type="text" ng-model="myVar" placeholder="Enter some text here"></input>
		<p></p>
		<div class="jumbotron">
			<h1 class="display-3">Hello world!</h1>
			<hr class="m-y-2"/>
			<p>{{myVar}}</p>
		</div>
		<button ng-click="clearTxt()" type ="button" class="btn btn-primary">Clear Text</button>
	</div>
</j:jelly>

UI Script

angular.module('angularapp',[]);
angular.module('angularapp').controller('AngularAppCtrl', function($scope){
	
	$scope.myVar = '';
	$scope.i = 0;
	
	$scope.clearTxt = function(){
		$scope.myVar = '';
		$scope.i++;
		alert("The myVar value was cleared " + $scope.i + " times by " + g_user.userName + ".");
		
	};
});

Thanks for any assistance

[phillipkeigley]

Hello @sbellapianta

You had a spelling error in your html and you weren't loading the angularJS library.  Those were the issues.  Here is working code:

 

var app = angular.module("angularapp", []);
app.controller("AngularAppCtrl", function($scope) {

    $scope.hello = function() {
        alert("Note Saved");
    };
	
		$scope.myVar = '';
	$scope.i = 0;
	
	$scope.clearTxt = function(){
		$scope.myVar = '';
		$scope.i++;
		alert("The myVar value was cleared " + $scope.i + " times by " + g_user.userName + ".");
		
	};

});

[seanb]

I appreciate your help with my typing and reading problems haha.

[phillipkeigley]

yw 🙂