embedding widget from ng template

Community Alums
Not applicable

‎08-16-2020 07:42 AM

I have a template that loads fine from the sp-model directive that I'm passing form data. I'm just trying to embed a widget  within it.  From just the html the widget loads correctly.  From the sp-model directive using the custom template though, it doesn't come up. 

Does the template not have access to my client script's variable?

 

ng-template (id=myTemplate):

<div>
  <sp-widget widget="c.coolClock"></sp-widget> <!-- doesn't work here -->
  <!-- some other html that works fine -->

</div>

html:

<sp-widget widget="c.coolClock"></sp-widget> <!-- widget works here -->

<sp-model form-model="c.data.form" mandatory template-url="myTemplate"></sp-model> <!-- widget doesn't load here -->

client script:

function (spUtil) {
  var c = this;
 
  spUtil.get("widget-cool-clock").then(function (response) {
    c.coolClock =response;
  });
}
 
server script:
(function() {
  data.form = $sp.getForm('someTableName', '-1', null, 'sp');
})();
0 Helpfuls
  • 2,045 Views
1 REPLY 1

Tony DiRienzo
Giga Guru

‎08-18-2020 05:10 PM

You are correct.  The template cannot access c.coolClock from your main widget's client script.  Here is the reason:  The spModel directive creates its own isolated scope with its own controller, and the template is being evaluated inside of the spModel scope, so it is looking for coolClock on the spModel scope's controller.  It cannot see outside of its scope into the parent scope (the widget that is invoking spModel).  Here is an attempt at showing this with a visual hierarchy:

[rootScope]
 c = root cotroller

    [portal page scope]
      c = portal page's controller

        [your widget's scope]
          c = your widget's controller
          c.coolClock is defined here

            [sp-model directive's scope]
             c = sp-model's controller
             myTemplate is evaluated here
             c.coolClock does not exist here

There are a few ways you could work around this.  The most direct method might be to have your template look in the main widget's scope for c.coolClock.  Based on my experience with angularJS, something like this would probably work:

Widget HTML

Give some element in the widget a unique ID, for example a wrapper div:

<div id="somethingUnique">
    <sp-model form-model="c.data.form" mandatory template-url="myTemplate"></sp-model>
</div>

myTemplate HTML

Access the scope of the element that has the unique ID you defined on the widget:

<div>
  <sp-widget widget="angular.element('#somethingUnique').scope().c.coolClock"></sp-widget>
</div>

Hopefully this helps (and more importantly, hopefully it works).

0 Helpfuls