AngularJS:当css类发生变化时，如何通过切换来更改颜色属性

AngularJS: How to change the color property via toggle when css class does change?

本文关键字：何通过 属性 颜色 css 变化 AngularJS      更新时间：2023-09-26

我对AngularJS很陌生，并且已经在这个论坛上找到了很多有用的答案，但是以下项目让我发疯。

首先，让我告诉你我想做什么：我确实有一个元素，我想在运行时更改其中的颜色属性，但前提是该特定元素具有"active"类。

因此，我创建了一个如下所示的指令：

OfficeUIRibbon.directive('officeActiveStyle', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
          scope.$watch(function() {
            return element.attr('class');
          }, function(newValue, oldValue) {
            if (newValue !== oldValue) { // Values will be equal on     initialization
              alert('Changed');
            }
          });
        }
    };
});

据我所知，这确实监视属性类，并且 if 检查它们确实确保在首次启动应用程序时不会触发监视。

现在，正在使用 ng-click 指令设置元素的类属性。

当我现在执行 HTML 时，没有任何反应。当我单击"设置活动"链接时，类已更改，但指令不会向我显示警报。（这是为什么？如果我再次更改类，则指令确实向我显示警报。

那么，为什么在第一次点击时，指令的警报没有被触发？

我创建了一个 plunker 以便更好地理解。

希望有人能告诉我这有什么问题，因为它确实阻碍了我的工作。

你可以

，但你不需要使用directives来使这项工作很好。您可以使用ng-style或仅使用$scope，如以下示例所示。这个演示向您展示了如何使用directives在 AngularJS 中轻松使"切换"工作。

var OfficeUIRibbon = angular.module('OfficeUIRibbon', []);
OfficeUIRibbon.directive('officeActiveStyle', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
          scope.$watch(function() {
               officeUiRibbonActiveHexColor = '#f700ff';
          });
        }
    };
});
/**
 * CSS Hex color holder
 * @type {string}
 * @global
 */
 var officeUiRibbonActiveHexColor = '#ff0000';
/**
 * Active holder
 * @type {boolean}
 * @global
 */
 var officeUiRibbonActiveToggle = false;
// Defines the AngularJS 'OfficeUIRibbon' controller.
OfficeUIRibbon.controller('OfficeUIRibbon', ['$scope', '$http', '$animate', function($scope, $http, $animate) {

    $scope.toggle = function () {
      officeUiRibbonActiveToggle = officeUiRibbonActiveToggle ? false : true; //switch active state
    }
    $scope.getStyles = function () {
      if (officeUiRibbonActiveToggle) {
         return officeUiRibbonActiveHexColor; 
      }
    }
}]);

HTML模板：

<!DOCTYPE html>
<html ng-app="OfficeUIRibbon">
  <head>
    <script src="https://code.angularjs.org/1.3.10/angular.js"></script>
    <script src="script.js"></script>
  </head>
  <body ng-controller="OfficeUIRibbon">
    <div
         office-active-style=""
         style="height: 200px; border: 1px solid black; background-color: {{ getStyles(); }}">Dit is een demo</div>
         <a href="#" ng-click="toggle()">Toggle</a>
  </body>
</html>

解决方案 2

可选：这是另一个演示。这个演示向您展示了如何在不使用 directives 的情况下轻松地在 angularjs 中"切换"工作。

var OfficeUIRibbon = angular.module('OfficeUIRibbon', [])
OfficeUIRibbon.controller('OfficeUIRibbon', ['$scope', '$http', '$animate', function($scope, $http, $animate) {
    /**
     * Active state holder
     * @type {boolean} 
     */ 
    var active = false;
    /**
     * Holds css color hex code
     * @type {string}
     */
    var color = '#ff0000';
    /**
    * Check active scope
    */
    $scope.toggleShow = function () {
      active = !active; //switch true false in the coolest way ;)
    }
    /** 
    * Check active scope
    */
    $scope.giveColor = function () {
      if (active) { 
         return color;
      } 
    }
}]);

您的 HTML 模板：

<!DOCTYPE html>
<html ng-app="OfficeUIRibbon">
  <head>
    <script src="https://code.angularjs.org/1.3.10/angular.js"></script>
    <script src="script.js"></script>
  </head>
  <body ng-controller="OfficeUIRibbon">
    <div office-active-style=""
         style="height: 200px; border: 1px solid black; background-color: {{ giveColor() }}">Dit is een demo</div>
         <a href="#" ng-click="toggleShow()">Toggle</a>
  </body>
</html>
相关文章：