Add support for angularjs templates to ngeo-displaywindow

examples/displaywindow.css

@@ -54,3 +54,15 @@
   font-family: FontAwesome;
   content: "\f0c9";
 }
+
+#textBindingOutput {
+  border: 1px dotted #0e0e0e;
+  padding: 10px;
+}
+
+label {
+  font-weight: bold;
+  display: block;
+  width: 50px;
+  float: left;
+}

examples/displaywindow.html

@@ -16,6 +16,16 @@
         type="button"
         class="btn btn-default">Open / close window 2.</button>
 
+    <button ng-click="ctrl.window3IsOpen = !ctrl.window3IsOpen;"
+            title="Open window 3."
+            type="button"
+            class="btn btn-default">Open / close window 3.</button>
+
+    <button ng-click="ctrl.window4IsOpen = !ctrl.window4IsOpen;"
+            title="Open window 4."
+            type="button"
+            class="btn btn-default">Open / close window 4.</button>
+
     <ngeo-displaywindow
       class="window1"
       url="::ctrl.window1Content"
@@ -36,5 +46,39 @@
       title="'Window 2 - A powerful window'">
     </ngeo-displaywindow>
 
+    <ngeo-displaywindow
+      class="window3"
+      clear-on-close="::false"
+      content-template="::ctrl.window3Template"
+      content-scope="::ctrl.windowScope"
+      open="ctrl.window3IsOpen"
+      title="'Window 3 - Using angular-directives'">
+    </ngeo-displaywindow>
+
+    <ngeo-displaywindow
+      class="window4"
+      clear-on-close="::false"
+      content-template="::ctrl.window4Template"
+      content-scope="::ctrl.windowScope"
+      width="::400"
+      height="::250"
+      open="ctrl.window4IsOpen"
+      title="'Window 4 - Using AngularJS template with bindings'">
+    </ngeo-displaywindow>
+
+    <script type="text/ng-template"
+            id="window4Template">
+      <div class="details">
+        <h3>Using AngularJS bindings:</h3>
+        <p>
+          <label for="textBinding">Data: </label>
+          <input type="text" id="textBinding" size="35" ng-model="ctrl.window4TextBinding" />
+        </p>
+        <p>
+          Output:
+        <p id="textBindingOutput">{{ctrl.window4TextBinding}}</p>
+        </p>
+      </div>
+    </script>
   </body>
 </html>

examples/displaywindow.js

@@ -12,10 +12,11 @@ app.displaywindow.module = angular.module('app', [
 
 
 /**
+ * @param {angular.Scope} $scope Scope.
  * @ngInject
  * @constructor
  */
-app.displaywindow.MainController = function() {
+app.displaywindow.MainController = function($scope) {
 
   /**
    * @type {string}
@@ -40,6 +41,56 @@ app.displaywindow.MainController = function() {
    */
   this.window2IsOpen = false;
 
+  /**
+   * @type {boolean}
+   * @export
+   */
+  this.window3IsOpen = false;
+
+  /**
+   * @type {string}
+   * @export
+   */
+  this.window3Template = `
+    <div class="details">
+      <p>
+          <h3>Using AngularJS directives:</h3>
+          <span ng-if="!ctrl.window3FalseValue">This should appear</span>
+          <span ng-show="ctrl.window3FalseValue">This should not be visible</span>
+      </p>
+    </div>
+  `;
+
+  /**
+   * @type {boolean}
+   * @export
+   */
+  this.window3FalseValue = false;
+
+
+  /**
+   * @type {boolean}
+   * @export
+   */
+  this.window4IsOpen = false;
+
+  /**
+   * @type {string}
+   * @export
+   */
+  this.window4Template = angular.element(document.getElementById('window4Template')).html();
+
+  /**
+   * @type {string}
+   * @export
+   */
+  this.window4TextBinding = 'This is an AngularJS binding.';
+
+  /**
+   * @type {angular.Scope}
+   * @export
+   */
+  this.windowScope = $scope;
 };
 
 

src/message/displaywindowComponent.js

@@ -49,12 +49,14 @@ ngeo.message.displaywindowComponent.Controller_ = class {
   /**
    * @param {!jQuery} $element Element.
    * @param {!angular.$sce} $sce Angular sce service.
+   * @param {!angular.Scope} $scope Scope.
+   * @param {angular.$compile} $compile The compile provider.
    * @private
    * @ngInject
    * @ngdoc controller
    * @ngname ngeoDisplaywindowComponentController
    */
-  constructor($element, $sce) {
+  constructor($element, $sce, $scope, $compile) {
 
     // === Binding Properties ===
 
@@ -70,6 +72,16 @@ ngeo.message.displaywindowComponent.Controller_ = class {
      */
     this.content = null;
 
+    /**
+     * @type {?string}
+     */
+    this.contentTemplate = null;
+
+    /**
+     * @type {?angular.Scope}
+     */
+    this.contentScope = null;
+
     /**
      * @type {boolean}
      * @export
@@ -138,6 +150,18 @@ ngeo.message.displaywindowComponent.Controller_ = class {
      * @private
      */
     this.sce_ = $sce;
+
+    /**
+     * @type {angular.Scope}
+     * @private
+     */
+    this.scope_ = $scope;
+
+    /**
+     * @type {angular.$compile}
+     * @private
+     */
+    this.compile_ = $compile;
   }
 
   /**
@@ -148,6 +172,8 @@ ngeo.message.displaywindowComponent.Controller_ = class {
     // Initialize binding properties
     this.clearOnClose = this.clearOnClose !== false;
     this.content = this.content || null;
+    this.contentTemplate = this.contentTemplate || null;
+    this.contentScope = this.contentScope || null;
     this.desktop = this.desktop !== false;
     this.draggableContainment = this.draggableContainment || 'document';
     this.open = this.open === true;
@@ -171,6 +197,13 @@ ngeo.message.displaywindowComponent.Controller_ = class {
         'minWidth': 240
       });
     }
+
+    if (this.contentTemplate) {
+      const scope = this.contentScope || this.scope_;
+      const compiled = this.compile_(this.contentTemplate)(scope);
+      const displayWindow = this.element_.find('.ngeo-displaywindow .windowcontainer .animation-container');
+      displayWindow.append(compiled);
+    }
   }
 
   /**
@@ -231,6 +264,7 @@ ngeo.message.displaywindowComponent.Controller_ = class {
  *
  * - it supports being dragged
  * - it supports being resized
+ * - support angularjs template content
  *
  * Example:
  *      <ngeo-displaywindow
@@ -244,6 +278,9 @@ ngeo.message.displaywindowComponent.Controller_ = class {
  * @htmlAttribute {boolean=} ngeo-displaywindow-clear-on-close Whether to clear the content on close or not.
  * @htmlAttribute {string=} ngeo-displaywindow-content The html content. If not provided, you must provide
  *     an url.
+ * @htmlAttribute {string=} ngeo-displaywindow-content-template AngularJS template. It gets compiled during runtime
+ * with the supplied scope (ngeo-displaywindow-content-scope).
+ * @htmlAttribute {angular.Scope=} ngeo-displaywindow-content-scope Scope used for ngeo-displaywindow-content-template.
  * @htmlAttribute {boolean=} ngeo-displaywindow-desktop If true, the window is draggable and resizable. If
  *     not set, you must set manually both parameter.
  * @htmlAttribute {boolean=} ngeo-displaywindow-draggable Wheter the window is draggable or not.
@@ -262,6 +299,8 @@ ngeo.message.displaywindowComponent.component('ngeoDisplaywindow', {
   bindings: {
     'clearOnClose': '<?',
     'content': '=?',
+    'contentTemplate': '<?',
+    'contentScope': '<?',
     'desktop': '<?',
     'draggable': '<?',
     'draggableContainment': '<?',