Options
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
10-26-2023 08:07 AM
I have never tried pulling in React in Service Portal, but the following might work.
In the client controller define some variables on $scope or c.
api.controller = function($scope){
var c = this;
$scope.geoLoc = {
"lat": "",
"long": ""
};
//to test if this works watch the variables for changes and log out values
$scope.$watch( 'geoLoc ', function (newValue, oldValue ) {
if(newValue.lat || newValue.long)
console.log(newValue)
}, true)
...
}
Since your React script is outside AngularJS scope you'll need to grab it within the script tags in the HTML template. You'll also want to wrap within a setTimeout to ensure the elements are present before the script runs.
<script>
setTimeout(function(){
var scope = angular.element('#Geo_Map_root').scope();
let locTimer;
const loadLocationMap = () => {
const { LocationMap } = window.geoJsLib;
const root = ReactDOM.createRoot(document.getElementById('Geo_Map_root'));
const onSubmit=(location) => {
scope.geoLoc.lat = location.latitude.toString();
scope.geoLoc.long = location.longitude.toString();
}
root.render(React.createElement(LocationMap, { onSubmit }, null));
}
},500);
</script>
I know that doing this works without using React, so theoretically it should work with it.