AngularJS：如何通过切换改变颜色属性时CSS类没有改变？ | 如何通过切换改变颜色属性时CSS类没有改变

本文介绍了AngularJS：如何通过切换改变颜色属性时CSS类没有改变？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是很新的AngularJS并已发现了很多有益的答案在这个论坛上，但以下项目是推动我疯了。

I'm quite new to AngularJS and have already found a lot of helpfull answers on this forum, however the following item is driving me nuts.

首先，让我告诉你我想做的事：
我有一个元素，我想在运行时改变颜色属性，但只有当该特定元素的类活跃。

First of all, let me tell you what I want to do:I do have an element, of which I would like to change the color property at runtime, but only when that particular element has the class 'active'.

所以，我创建了一个指令，它看起来如下：

Therefore, I have created a directive which looks like the following:

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');
            }
          });
        }
    };
});

据我所知所说，这确实看属性类和检查，如果他们确实确保当应用程序首次推出手表不会被触发。

As far as my knowledge goes, this does watch the attribute class and the if check in their does make sure that the watch isn't triggered when the application is first launched.

现在，元素的类属性正在使用NG-点击指令设置的。

Now, the class property of the element is being set by using the ng-click directive.

当我现在执行HTML，没有任何反应。当我点击设置为活动链接，该类被改变，但是指令不告诉我一个警告。（这是为什么？）。如果我再一次改变类，那么指令就告诉我一个警告。

When I now execute the HTML, nothing happens. When I click the 'set active' link, the class is changed, but the directive doesn't show me an alert. (Why is that?). If I then change the class again, then the directive does show me an alert.

那么，为什么在第一次点击，则不会触发指令的警报？

So, why, on the first click, the alert of the directive isn't triggered?

我创建了一个获得更好的理解。

I've created a plunker for better understanding.

希望有人能告诉我有什么不对的，因为它确实挡住了我的工作。

Hopefully, someone can tell me what's wrong with this because it's really blocking my work.

推荐答案

可以，但你并不需要使用指令，使这项工作很好。你可以使用 NG-风格或只是 $范围像下面的例子会告诉你。这会告诉你，多么容易使一个开关工作AngularJS使用指令。

You can, but you don't need to use directives to make this work nice. You could use ng-styleor just $scopelike the following example will show you. This Demo shows you, how easy make a "toggle" work in AngularJS by using directives.

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的模板：

HTML-Template:

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

可选：这是一个其他演示。该演示展示了你，多么容易使angularjs一个切换的工作，而无需使用指令。

Solution 2

Optional: This is an other Demo. This demo shows you, how easy make a "toggle" work in angularjs without using directives.

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>

这篇关于AngularJS：如何通过切换改变颜色属性时CSS类没有改变？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！