css - 从页面上的按钮更新页面上的元素 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。但无论我尝试什么方法，我似乎都无法找到一种方法来访问另一个 Controller 页面上的元素。

我试过:

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

或

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

Answer 1

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

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

然后你可以在你的 Controller 中注入(inject)这个常量并修改它。

.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'}">