从页面上的按钮更新页面上的元素 CSS

Question

我正在为一个应用程序使用标签。我想要一个用户按钮，当单击 tab-detail.html 时，它会更新其父标签页 tab.html

上元素的 CSS

.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" ;
   }
})

进入 tab-detail.html 的唯一方法是通过 tab.html，因此必须加载 tab.html。但是无论我尝试什么方法，我似乎都无法找到一种方法来访问另一个控制器页面上的元素。

我试过：

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

或

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

Answer 1

您正在做的方法永远不会为您完成工作，因为您想要的 DOM 不可用。您可以通过创建一个可共享服务来实现这一点，该服务将在其中维护所有这些变量，并将在 UI 上使用。为了确保它们的绑定，您的服务变量应该在 object 结构中，例如 styleData 或者您也可以通过创建 angular 常量来实现。

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

然后你可以在你的控制器中注入这个常量并修改它。

.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" ;
   }
})

标记

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

Answer 2

一种方法是...... 1）创建服务 2) 在单击按钮时为服务中的变量设置一个值(tab-detail.html) 3) 在 tab.html

中使用该服务变量值

Answer 3

（更正更新在底部）

@pankajparkar 解决方案确实有效，但它不适用于 IONIC，因为 IONIC 框架以某种方式覆盖了 DOM 设置。通过 DOM 元素检查器可以看到：style='color:green' 被内联添加到 ITEM/SPAN 并且可以看到元素定义为：element.style{ color: green}...但是渲染的颜色 HTML 没有改变....它保持黑色。

进一步的研究表明这在某种程度上是一个 IONIC 问题，因为其他用户也有同样的问题。其他 SOF 和博客表明似乎有解决方法，但我还没有看到它起作用。

以上内容已重新格式化以供其他人将来使用（即使它不适用于 IONIC），因此我仍在寻找与 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>

更正：此方法确实有效，并且适用于 IONIC。 IONIC 的问题是嵌入在离子标签中的每个元素 <ion-item>... <ion-nav> ...等从预定义的 classes 继承其自己的属性...因此您必须更新 class（不是最佳的）或在每个元素 and/or 上应用 ID 标签 CSS 更改（使用上述方法）到每个子元素。这不是最佳的，但它会起作用。

在我的例子中，我的 HTML 实际上看起来像：

<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>

上述 CSS 方法适用于此：

<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>

从页面上的按钮更新页面上的元素 CSS

Updating element CSS on PageA from button on PageB

css

angularjs

controllers

between