For my app, I am incorporating tabs. I want to implement a user button that, when clicked on tab-detail.html, will update the CSS of an element located on its parent tab page, tab.html.
.controller('TabCtrl', function($scope,Tabs) {
$scope.tabs = Tabs.all() ;
// This fills in the "tab.html" template
// An element on this page is: <span id="tab_selected_1">
// When a user selects a listed item on tab.html
// It redirects to tab-detail.html
})
.controller('TabDetailCtrl', function($scope,$stateparams,Tabs) {
$scope.tabs = Tabs.get($stateparams.tabID) ;
// On tab-detail.html, there is a button <button ng-click="tabSelect()">
$scope.tabSelect = function(thisID) {
// Update the css on TabCtrl's elementID
document.getElementById('tab_selected_1').style.color = "green" ;
}
})
The only way to access tab-detail.html is through tab.html, therefore tab.html must be loaded. However, no matter what approach I take, I can't seem to find a way to reach the element that belongs to another controller's page.
I have attempted:
var e = angular.element('tab_selected_1');
or
var e = angular.element(document.querySelector('tab_selected_1') ;
e.style.color = "green" ;