AngularJS on a UI Page - How to simply get the current "sysparm" of URL?

[MG Casey]

I feel a bit lost when trying to solve a specific problem on a UI Page where there might be a "sysparm_recordid" parameter in the URL.

I've tried all sorts of variations, but no luck getting the value of my URL parameter into my scope.

var myApp = angular.module('voicemailSupport', []);
myApp.controller('voicemailData', function($scope, $location, $window, $timeout, $interval, $document) {

   $scope.recordID = $location.search().sysparm_recordid;

});

I don't need to do any updating of the URL - just want to grab the value of the parameter of the page that was loaded.

[ChrisBurks]

Have you tried making a simple directive as an element attribute to grab the url from a jelly variable?

For example, at the top of your UI page (after the xml declaration and all) use the normal jelly stuff like RP.getParameterValue and stuff that into a variable:

<!-- get the record id from url parameter -->
<j:set var="jvar_id"  value="${RP.getParameterValue('sysparm_recordid')}"/> 

Then create your directive and supporting code:

...

.controller('WhateverExistingControllerDirectiveIsUsed', function($scope){
      $scope.$on('record.id', function(evt,data){
           $scope.whateverVariableNeedsItOnScope = data;
      })
})

...
  // tack this on just like you've done your controller. 
.directive('urlParamGetter', urlParamGetter)

function urlParamGetter(){
    return {
	'restrict': 'A',
	'scope':{
	    parm: '='
	},
	
	'link': function(scope,element,attrs){
		scope.$emit('record.id', scope.parm)
	}
    }
}

The idea here is that you will use $emit to send out when the record id has been populated in "parm" with the value coming from the jvar_id. Then grab that data with $on and assign the value to the necessary variable.

You would do that by adding your directive and declared attribute as attributes to an element within one of your controllers:

<!-- remember the camel case gets replaced with lowercase and hyphens -->
<!-- also since jelly is xml and xml is strict, you'll have to add the '=""' to the url-param-getter attribute. It can't be unassigned -->

<div ng-controller="WhateverExistingControllerDirectiveIsUsed">
  <div url-param-getter="" parm="'${jvar_id}'">
     <!-- more stuff -->
  </div>
   
</div>

Let me know if you want a mockup to see this in action.

[MG Casey · Accepted solution]

I think I have it figured it out after reading through your reply and some more examples out there:

var myApp = angular.module('voicemailSupport', [], function($locationProvider) {
	$locationProvider.html5Mode(true);
});

myApp.controller('voicemailData', function($scope, $location) {

   $scope.recordID = $location.search().sysparm_recordid;

});

This seems to work in all browsers I test, plus I don't have to utilize Jelly.