From d00173980f347bd7db8687f493998c97350ceaa4 Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Mon, 25 Feb 2019 11:04:54 +0100
Subject: [PATCH 1/2] feat(oui-popover): add scope attribute for template

---
 packages/oui-popover/README.md                | 18 +++++++++++----
 packages/oui-popover/src/index.spec.js        | 23 ++++++++++++++++---
 .../oui-popover/src/popover.controller.js     |  5 +++-
 packages/oui-popover/src/popover.directive.js |  1 +
 4 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/packages/oui-popover/README.md b/packages/oui-popover/README.md
index a9fec30b..deda7f67 100644
--- a/packages/oui-popover/README.md
+++ b/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
 
diff --git a/packages/oui-popover/src/index.spec.js b/packages/oui-popover/src/index.spec.js
index 0d12f7d2..5ec0bdf6 100644
--- a/packages/oui-popover/src/index.spec.js
+++ b/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", () => {
diff --git a/packages/oui-popover/src/popover.controller.js b/packages/oui-popover/src/popover.controller.js
index 59ee895d..68c32b06 100644
--- a/packages/oui-popover/src/popover.controller.js
+++ b/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
diff --git a/packages/oui-popover/src/popover.directive.js b/packages/oui-popover/src/popover.directive.js
index b388e7d5..5daaab38 100644
--- a/packages/oui-popover/src/popover.directive.js
+++ b/packages/oui-popover/src/popover.directive.js
@@ -9,6 +9,7 @@ export default () => {
             text: "@ouiPopover",
             title: "@?",
             placement: "@?ouiPopoverPlacement",
+            scope: "=?ouiPopoverScope",
             template: "@?ouiPopoverTemplate"
         },
         controller,

From 539b373fe5df5883cd5dd84be9bcce9b03841992 Mon Sep 17 00:00:00 2001
From: Axel Peter <axel.peter@corp.ovh.com>
Date: Tue, 26 Feb 2019 10:09:37 +0100
Subject: [PATCH 2/2] style: code review

---
 packages/oui-popover/README.md                | 2 +-
 packages/oui-popover/src/popover.directive.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/oui-popover/README.md b/packages/oui-popover/README.md
index deda7f67..90712e60 100644
--- a/packages/oui-popover/README.md
+++ b/packages/oui-popover/README.md
@@ -128,7 +128,7 @@
 | ----                      | ----      | ----      | ----              | ----                                                                                          | ----              | ----
 | `oui-popover`             | string    | @         | no                | n/a                                                                                           | `title` attribute | popover content
 | `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-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
diff --git a/packages/oui-popover/src/popover.directive.js b/packages/oui-popover/src/popover.directive.js
index 5daaab38..f18fc57e 100644
--- a/packages/oui-popover/src/popover.directive.js
+++ b/packages/oui-popover/src/popover.directive.js
@@ -9,7 +9,7 @@ export default () => {
             text: "@ouiPopover",
             title: "@?",
             placement: "@?ouiPopoverPlacement",
-            scope: "=?ouiPopoverScope",
+            scope: "<?ouiPopoverScope",
             template: "@?ouiPopoverTemplate"
         },
         controller,