Use unique identifiers in share and featureStyle components

contribs/gmf/src/drawing/featureStyleComponent.html

@@ -10,13 +10,13 @@
       ng-if="fsCtrl.type !== 'Text'"
       class="form-group">
         <input
-          id="gmf-featurestyle-showlabel"
+          id="gmf-featurestyle-showlabel-{{::fsCtrl.uid}}"
           type="checkbox"
           ng-model="fsCtrl.getSetShowLabel"
           ng-model-options="{getterSetter: true}"/>
         <label
           ng-switch="fsCtrl.type"
-          for="gmf-featurestyle-showlabel"
+          for="gmf-featurestyle-showlabel-{{::fsCtrl.uid}}"
           class="control-label">
           {{'Display label' | translate}}
         </label>
@@ -25,13 +25,13 @@
       ng-if="fsCtrl.type !== 'Text'"
       class="form-group">
       <input
-          id="gmf-featurestyle-showmeasure"
+          id="gmf-featurestyle-showmeasure-{{::fsCtrl.uid}}"
           type="checkbox"
           ng-model="fsCtrl.getSetShowMeasure"
           ng-model-options="{getterSetter: true}"/>
       <label
           ng-switch="fsCtrl.type"
-          for="gmf-featurestyle-showmeasure"
+          for="gmf-featurestyle-showmeasure-{{::fsCtrl.uid}}"
           class="control-label">
         <span ng-switch-when="Circle">
           {{'Display azimuth and radius' | translate}}

contribs/gmf/src/drawing/featureStyleComponent.js

@@ -2,6 +2,7 @@
  * @module gmf.drawing.featureStyleComponent
  */
 import googAsserts from 'goog/asserts.js';
+import * as olBase from 'ol/index.js';
 import * as olEvents from 'ol/events.js';
 import ngeoFormatFeatureProperties from 'ngeo/format/FeatureProperties.js';
 
@@ -66,6 +67,12 @@ exports.directive('gmfFeaturestyle',
  */
 exports.Controller_ = function($scope, ngeoFeatureHelper) {
 
+  /**
+   * @type {number}
+   * @export
+   */
+  this.uid = olBase.getUid(this);
+
   /**
    * @type {?ol.Feature}
    * @export

contribs/gmf/src/layertree/component.html

@@ -129,10 +129,9 @@
         <ul>
           <li ng-if="::(layertreeCtrl.depth === 1 && !layertreeCtrl.node.mixed) || (layertreeCtrl.depth > 1 && layertreeCtrl.parent.node.mixed)">
             <i class="fa fa-tint fa-fw"></i>
-            <span for="layer-opactity">{{'Opacity'|translate}}</span>
+            <span>{{'Opacity'|translate}}</span>
             <input
               class="input-action"
-              name="layer-opactity"
               type="range"
               min="0"
               max="1"
@@ -190,10 +189,9 @@
 
   <div ng-if="::gmfLayertreeCtrl.supportsOpacityChange(layertreeCtrl)">
     <i class="fa fa-tint fa-fw"></i>
-    <span for="layer-opactity">{{'Opacity'|translate}}</span>
+    <span>{{'Opacity'|translate}}</span>
     <input
         class="input-action"
-        name="layer-opactity"
         type="range"
         min="0"
         max="1"

contribs/gmf/src/permalink/shareComponent.html

@@ -5,8 +5,8 @@ <h4 class="modal-title" translate>Share this map</h4>
 <div class="modal-body">
   <form role="form" name="gmfShareForm" novalidate>
     <div class="form-group">
-      <label for="gmfShareInputShortLink" translate>Permalink</label>
-      <input type="text" class="form-control" id="gmfShareInputShortLink" onclick="this.select()" ng-model="$ctrl.shortLink" readonly="True">
+      <label for="gmfShareInputShortLink-{{::$ctrl.uid}}" translate>Permalink</label>
+      <input type="text" class="form-control" id="gmfShareInputShortLink-{{::$ctrl.uid}}" onclick="this.select()" ng-model="$ctrl.shortLink" readonly="True">
       <p class="help-block" translate>Copy this link to share it.</p>
       <p class="text-danger" ng-if="$ctrl.showLengthWarning">
         <span class="fa fa-exclamation-triangle"></span>
@@ -20,8 +20,8 @@ <h4 class="modal-title" translate>Share this map</h4>
     <hr>
     <div class="gmf-share-email" ng-if="::$ctrl.enableEmail">
       <div class="form-group">
-        <label for="gmfShareInputEmail" translate>Send this link to</label>
-        <input type="email" class="form-control"  name="inputEmail" id="gmfShareInputEmail" placeholder="E-mail" ng-model="$ctrl.email" required>
+        <label for="gmfShareInputEmail-{{::$ctrl.uid}}" translate>Send this link to</label>
+        <input type="email" class="form-control"  name="inputEmail" id="gmfShareInputEmail-{{::$ctrl.uid}}" placeholder="E-mail" ng-model="$ctrl.email" required>
         <span ng-show="gmfShareForm.$submitted || gmfShareForm.inputEmail.$touched">
           <span class="text-danger" ng-show="gmfShareForm.inputEmail.$error.email || gmfShareForm.inputEmail.$error.required">
             <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>

contribs/gmf/src/permalink/shareComponent.js

@@ -3,6 +3,7 @@
  */
 import gmfPermalinkShareService from 'gmf/permalink/ShareService.js';
 import ngeoStatemanagerLocation from 'ngeo/statemanager/Location.js';
+import * as olBase from 'ol/index.js';
 
 const exports = angular.module('gmfPermalinkShareComponent', [
   gmfPermalinkShareService.module.name,
@@ -73,6 +74,13 @@ class ShareComponentController {
    * @ngname GmfShareController
    */
   constructor($scope, ngeoLocation, gmfShareService, $q, $attrs) {
+
+    /**
+     * @type {number}
+     * @export
+     */
+    this.uid = olBase.getUid(this);
+
     /**
      * @type {angular.Scope}
      * @private