AngularJS：如何在css类更改时通过切换更改颜色属性？

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

首先，让我告诉你我想做什么：我确实有一个元素，我想在运行时更改color属性，但只有当该特定元素具有类’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'); } }); } }; }); 

据我所知，这确实会观察属性类，如果检查它们，确保在首次启动应用程序时不会触发手表。

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

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

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

我已经创造了一个更好理解的掠夺者 。

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

Answer 1

你可以，但你不需要使用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的模板：

        
Dit is een demo
 Toggle   

解决方案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模板：

        
Dit is een demo
 Toggle