mainly used for reusing a directive/component over and over again in side of a component or other component, note templateUrl has to be bind to a widget so if you wana re-use the same angular provider for different widgets, maybe considering using tempalte strings.
widgets: angular provider :
https://www.youtube.com/watch?v=vnDklla7Vsc
https://www.google.com/search?sca_esv=559894069&rlz=1C1GCEA_enCA1031CA1031&sxsrf=AB5stBiCN4FCXOyBUHXvLt6hdaQf9aMrpA:1692925333942&q=servicenow+can+you+add+a+widget+in+service+catalog&tbm=vid&source=lnms&sa=X&ved=2ahUKEwi7naSpzvaAAxUqGDQIHYH1BeMQ0pQJegQIDhAB&biw=1920&bih=963&dpr=1#fpstate=ive&vld=cid:380b8a22,vid:xgWLAnHoPcA
https://serviceportal.io/creating-angular-directive-service-portal/
function(){
return {
link: function($scope){
$scope.displayMessage = function() {
alert('Hello World');
};
},
restrict: 'A', // use 'A' for attribute or 'E' for element
replace: 'true',
template: '<div ng-click="displayMessage()" class="btn btn-primary">This is a Directive</div>'
};
}
To use your Angular Provider you will need to associate it with a widget by linking the two together using the “Angular Providers” related list on the widget form.
Now you can use the directive within any of the HTML of that widget. For example:
<div sp-button></div> <!-- for Attribute -->
<sp-button></sp-button> <!-- for Element -->
// replace entire <sp-button></sp-button> withe provided tempalteUrl
replace: true.
templateUrl -> sp_ng_template.list
scope : {
// input all must be lower cases
field : '=', (pass in object)
input2 : '@', (pass in text)
}
css formatted by global or outer
can use $rootscope as well to pass events
$rootScope.$on('test', function (event, data) {
console.log(LOG_TAG, ' - event - ', event);
console.log(LOG_TAG, ' - data - ', data);
});
only problem is templateUrl is bind to widget, for useability, need to use string literals