Isolate the directive scope

frontend/app/components/wp-buttons/wp-list-view-button/wp-list-view-button.directive.html

@@ -1,14 +1,15 @@
 <label for="work-packages-list-view-button"
        ng-attr-accesskey="{{ isActive() ? undefined : '8' }}"
        class="hidden-for-sighted">
-  {{ getActivationActionLabel(!isActive()) + ' ' + I18n.t('js.button_list_view') }}
+
+  {{ text.label }}
 </label>
 <button id="work-packages-list-view-button"
-        ng-disabled="editAll.state"
+        ng-disabled="isDisabled()"
         class="button"
-        title="{{ getActivationActionLabel(!isActive()) + ' ' + I18n.t('js.button_list_view') }}"
+        title="{{ text.label }}"
         ng-click="openListView()"
         ng-class="{ '-active': isActive() }">
   <i class="icon-view-list button--icon"></i>
-  <span class="hidden-for-sighted">{{ getActivationActionLabel(!isActive()) + ' ' + I18n.t('js.button_list_view') }}</span>
+  <span class="hidden-for-sighted">{{ text.label }}</span>
 </button>

frontend/app/components/wp-buttons/wp-list-view-button/wp-list-view-button.directive.js

@@ -35,11 +35,13 @@ function wpListViewButton() {
     restrict: 'E',
     templateUrl: '/components/wp-buttons/wp-list-view-button/wp-list-view-button.directive.html',
 
+    scope: {},
+
     controller: WorkPackageListViewButtonController
   };
 }
 
-function WorkPackageListViewButtonController($scope, $state) {
+function WorkPackageListViewButtonController($scope, $state, inplaceEditAll) {
   $scope.isActive = function () {
     return $state.is('work-packages.list');
   };
@@ -51,4 +53,15 @@ function WorkPackageListViewButtonController($scope, $state) {
     });
   };
 
+  $scope.isDisabled = function () {
+    return inplaceEditAll.state;
+  };
+
+  $scope.text = {
+    get label() {
+      var activate = !$scope.isActive() ? I18n.t('js.label_activate') + ' ' : '';
+      return activate + I18n.t('js.button_list_view');
+    }
+  };
+
 }