Updating element CSS on PageA from button on PageB

Question

I am using tabs for an app. I want a user button which when clicked on tab-detail.html to update the CSS of an element on its parent tab page tab.html

.controller('TabCtrl', function($scope,Tabs) {
    $scope.tabs = Tabs.all() ;
    // this populates the "tab.html" template
    // an element on this page is: <span id="tab_selected_1">
    // when user selects a listed item on tab.html
    // it calls tab-detail.html
})

.controller('TabDetailCtrl', function($scope,$stateparams,Tabs) {
   $scope.tabs = Tabs.get($stateparams.tabID) ;
    // on tab-detail.html is a button <button ng-click="tabSelect()">
   $scope.tabSelect = function(thisID) {
      // update css on TabCtrl elementID
      document.getElementById('tab_selected_1').style.color = "green" ;
   }
})

The only way to get to tab-detail.html is via tab.html, thus tab.html must be loaded. But no matter what method I try I can't seem to find a way to access the element that is on another controller's page.

I have tried:

var e = angluar.element('tab_selected_1');

or

var e = angluar.element(document.querySelector('tab_selected_1') ;
e.style.color = "green" ;

Answer 1

The approach you are doing will never do a JOB for you as the DOM you want isn't available. You could achieve this by creating a sharable service that will maintain all of this variable in it and it will be used on UI. For ensuring binding of them your service variable should be in object structure like styleData OR you could also achieve this by creating angular constant.

app.constant('constants', {
   data: {
   }
});

Then you could inject this constant inside you controller & modify it.

.controller('TabCtrl', function($scope, Tabs, constants) {
    $scope.constants = constants; //make it available constants on html
    $scope.tabs = Tabs.all() ;
    // this populates the "tab.html" template
    // an element on this page is: <span id="tab_selected_1">
    // when user selects a listed item on tab.html
    // it calls tab-detail.html
})

.controller('TabDetailCtrl', function($scope,$stateparams,Tabs, constants) {
   $scope.tabs = Tabs.get($stateparams.tabID) ;
   $scope.constants= constants; //make it available constants on html
    // on tab-detail.html is a button <button ng-click="tabSelect()">
   $scope.tabSelect = function(thisID) {
      // update css on TabCtrl elementID
      $scope.constants.data.color = "green" ;
   }
})

Markup

<div id="tab_selected_1" ng-style="{color: constants.data.color || 'black'}">

Answer 2

one way to do this is .... 1) Create a service 2) set a value to a variable in service on button click(tab-detail.html) 3) use that service variable value in tab.html

Answer 3

(Correction update at bottom)

@pankajparkar solution does work, however it does not work with IONIC as the IONIC Framework somehow overrides the DOM settings. Via the DOM Element inspector an see: style='color:green' being added inline to the ITEM/SPAN and can see the element defined as: element.style{ color: green}...but the color of the rendered HTML does not change....it stays black.

Further research shows this is somehow an IONIC problem as other users have the same problem. Other SOFs and blogs indicate that there appears to be a work around but I have yet to see it work.

The above is reformatted for others future use (even though it doesn't work with IONIC), thus I am still looking for a solution to work with IONIC:

.constant('constants', {
   tabColors: {
     curID:0,
   },
}) 

.controller('TabCtrl', function($scope,Tabs,constants) {
  $scope.constants = constants; 
}

.controller('TabDetailCtrl', function($scope,$stateparams,Tabs,constants) {
  $scope.constants = constants; 
  $scope.setItem= function(thisID) {
    $scope.constants.tabColors.oldID = $scope.constants.tabColors.curID ;
    delete $scope.constants.tabColors['tabID_'+$scope.constants.tabColors.curID] ;
    $scope.constants.tabColors.curID = thisID ;
    $scope.constants.tabColors['tabID_'+thisID] = 'green' ;
}

// HTML in Tab.html
<span id='tab_tabID_{{tab.tabID}}' ng-style="{color: constants.tabColors['tabID_'+tab.tabID] || 'black'}">
Some Text Here
</span>

//HTML in TabDetail.html
<button id="tab_button" class="button button-small button-outline button-positive" ng-click="setItem({{tab.tabID}});">
   Select This Item
</button> 

Correction: This method does work and does work with IONIC. The problem with IONIC is every element embedded within an ionic tag <ion-item>... <ion-nav> ...etc inherits its own properties from predefined classes...so you must either update the class (not optimal) or have ID tags on every element and/or apply CSS changes (using above method) to every child element. This is not optimal however it will work.

In my case my HTML actually looked like:

<span id='tab_tabID_{{tab.tabID}}' ng-style="{color: constants.tabColors['tabID_'+tab.tabID] || 'black'}">
  <h2>Header Text Here</h>
  <p>More text here</p>
</span>

The above CSS method works with this:

<span id='tab_tabID_{{tab.tabID}}'>
  <h2  ng-style="{color: constants.tabColors['tabID_'+tab.tabID] || 'black'}">
    Header Text Here
  </h>
  <p  ng-style="{color: constants.tabColors['tabID_'+tab.tabID] || 'black'}">
    More text here
  </p>
</span>