Issue in UI Macro using angular js

[Sindhuja10]

I created a UI Macro using angular js where the functionality is working on the form. After submitting the RITM getting error - Uncaught Error: [ng:btstrpd]

[SaiRaviKiran Ak]

Hi,

This usually happens when you use both ng-app and angular.bootstrap to bootstrap your application.

There are some other reasons also to cause this error.

You can find more details from below link

https://docs.angularjs.org/error/ng/btstrpd

Please mark answer as Correct if it solves your issue.

Thanks,

Ravi

[Ashutosh Munot1]

HI,

I think we can't use Angular JS in UI Macro.

Thanks,
Ashutosh

[ChrisBurks]

Hi  sindhujab,

Your description is a little unclear. Maybe some more information might help others to help solve your issue.

For instance a UI macro could be used on a catalog item to embed a Service Portal widget which does use angularjs. But of course we would need to know what the script looked like to trouble the issue. As per Ravi's reply, you could be bootstrapping angularjs again which wouldn't be necessary.

Or perhaps you could mean that you're using a UI macro to embed a formatter onto the RITM record. 

Either way some code would help to troubleshoot.

@Ashutosh,

Yes, AngularJS can be used in a UI Macro. It's just javascript same as jQuery. 

[Sindhuja10]

Hi Chris,

I have created a macro variable which has both UI Macro and a Widget. The widget works fine with the same angular code, while the UI Macro executes well on the catalog item, but throws error after submitting the request. I did not bootstrap again. Please refer the below code I am using

<div ng-app="MyApp" ng-controller="MyController">
<div class="table-responsive">
<table cellpadding="0" cellspacing="0">
<tr>
<th>Owner</th>
<th>Group</th>
</tr>
<tbody ng-repeat="m in Storages">
<tr>
<td><input class="form-control" value="{{m.owner}}"/></td>
<td><input class="form-control" value="{{m.group}}"/></td>
<td><input type="button" ng-click="Remove($index)" value="Remove" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><input class="form-control" type="text" id="owner" ng-model="owner" maxlength="20"/></td>
<td><input class="form-control" type="text" id="group" ng-model="group" maxlength="50" /></td>
<td><input type="button" id="Add" ng-click="Add()" value="Add" /></td>
</tr>
</tfoot>
</table>
</div>
</div>
<script language="javascript">
angular.module('MyApp', [])
.controller('MyController', function ($scope, $window) {
$scope.Storages = [];
$scope.Add = function () {
var fieldValues = [$scope.owner, $scope.group];


var values = {"owner":fieldValues[0],"group":fieldValues[1]};
$scope.Storages.push(values);


//Clear the TextBoxes.

$scope.owner = "";
$scope.group = "";

};
$scope.Remove = function (index) {

if ($window.confirm("Do you want to delete this record?")) {

//Remove the item from Array using Index.
$scope.Storages.splice(index, 1);

}
};

});
</script>

This is a simple Table with Add and Remove rows.