feat(oui-popover): add scope attribute for template

packages/oui-popover/README.md

@@ -27,22 +27,29 @@
 
 ### Using a template with `oui-popover-template` attribute
 
+<oui-message type="warning">
+    This method use <code class="oui-doc-codespan">ngInclude</code> to add the template in a popover and create an <strong>isolated</strong> scope.<br />
+    Use <code class="oui-doc-codespan">oui-popover-scope</code> to extend the isolated scope and <code class="oui-doc-codespan">$ctrl</code> to access thoses values.
+</oui-message>
+
 ```html:preview
-<button type="button" 
+<input type="text" class="oui-input oui-input_inline"
+  ng-init="$ctrl.awesome = 'awesome'"
+  ng-model="$ctrl.awesome">
+<button type="button"
     class="oui-button oui-button_primary" 
     oui-popover
+    oui-popover-scope="$ctrl"
     oui-popover-template="popover.html">
     Click to toggle popover
 </button>
 
 <script type="text/ng-template" id="popover.html">
-<p ng-init="$ctrl.awesome = 'awesome'">This is an <strong ng-bind="$ctrl.awesome"></strong> popover content.</p>
+<p>This is an <strong ng-bind="$ctrl.awesome"></strong> popover content.</p>
 <p><a href="#">The quick brown fox jumps over the lazy dog</a></p>
 </script>
 ```
 
-**Note**: This method use `ngInclude` to add the template in a popover. The content of your template will be compiled with a **new** scope. See [ngInclude](https://docs.angularjs.org/api/ng/directive/ngInclude).
-
 ### Using `oui-popover` component
 
 ```html:preview
@@ -120,8 +127,9 @@
 | Attribute                 | Type      | Binding   | One-time Binding  | Values                                                                                        | Default           | Description
 | ----                      | ----      | ----      | ----              | ----                                                                                          | ----              | ----
 | `oui-popover`             | string    | @         | no                | n/a                                                                                           | `title` attribute | popover content
-| `oui-popover-template`    | string    | @?        | no                | n/a                                                                                           | n/a               | popover content template
 | `oui-popover-placement`   | string    | @?        | yes               | See [Popper placements](https://popper.js.org/popper-documentation.html#Popper.placements)    | `right`           | modifier for alignment
+| `oui-popover-scope`       | string    | <?        | no                | n/a                                                                                           | n/a               | scope of the popover template
+| `oui-popover-template`    | string    | @?        | no                | n/a                                                                                           | n/a               | id of the popover template
 
 ## Deprecated
 

packages/oui-popover/src/index.spec.js

@@ -60,16 +60,33 @@ describe("ouiPopover", () => {
             });
 
             it("should create a popover, next to the trigger, with the content of the template", () => {
+                const foo = "bar";
                 const component = testUtils.compileTemplate(`<div>
-                    <button class="trigger" oui-popover="foo" oui-popover-template="popover.html"></button>
-                    <script type="text/ng-template" id="popover.html">foo</script>
+                    <button class="trigger" oui-popover oui-popover-template="popover.html"></button>
+                    <script type="text/ng-template" id="popover.html">${foo}</script>
                     </div>`);
 
                 $timeout.flush();
 
                 const popover = angular.element(component[0].querySelector(".trigger")).next();
 
-                expect(popover.text().trim()).toBe("foo");
+                expect(popover.text().trim()).toBe(foo);
+            });
+
+            it("should extend the scope of the template", () => {
+                const foo = "bar";
+                const component = testUtils.compileTemplate(`<div>
+                    <button class="trigger" oui-popover oui-popover-template="popover.html" oui-popover-scope="$ctrl"></button>
+                    <script type="text/ng-template" id="popover.html"><span ng-bind="$ctrl.foo"></span></script>
+                    </div>`, {
+                    foo
+                });
+
+                $timeout.flush();
+
+                const popover = angular.element(component[0].querySelector(".trigger")).next();
+
+                expect(popover.text().trim()).toBe(foo);
             });
 
             it("should set aria-expanded when trigger is clicked", () => {

packages/oui-popover/src/popover.controller.js

@@ -50,7 +50,10 @@ export default class PopoverController {
 
             // Support for attribute `oui-popover`
             // Create a new scope to compile the popover next to the trigger
-            const popoverScope = angular.extend(this.$scope.$new(true), { $popoverCtrl: this });
+            const popoverScope = angular.extend(this.$scope.$new(true), {
+                $popoverCtrl: this,
+                $ctrl: this.scope
+            });
             const popoverTemplate = this.$compile(template)(popoverScope);
 
             // Add compiled template after $element

packages/oui-popover/src/popover.directive.js

@@ -9,6 +9,7 @@ export default () => {
             text: "@ouiPopover",
             title: "@?",
             placement: "@?ouiPopoverPlacement",
+            scope: "<?ouiPopoverScope",
             template: "@?ouiPopoverTemplate"
         },
         controller,