Angular ng-class不能编译/工作
Angular是一种流行的前端开发框架，它使用HTML模板和JavaScript代码来构建动态的Web应用程序。ng-class是Angular中的一个指令，用于动态地添加或移除HTML元素的CSS类。
当ng-class不能编译或工作时，可能有以下几个原因：
- 错误的语法：ng-class指令有特定的语法要求。它可以接受一个对象、一个数组或一个字符串作为参数。如果语法不正确，Angular编译器将无法解析指令并报错。确保ng-class的语法正确无误。
- 作用域问题：ng-class指令的作用域是与其所在的控制器或组件相关联的。如果ng-class指令在错误的作用域中使用，它可能无法访问正确的变量或属性。确保ng-class指令在正确的作用域中使用。
- 数据绑定问题：ng-class指令通常与数据绑定一起使用，以根据数据的变化动态地添加或移除CSS类。如果数据绑定不正确或没有正确更新，ng-class指令可能无法正常工作。确保数据绑定正确并及时更新。
- CSS类不存在：如果ng-class指令中引用的CSS类不存在，它将无法应用或移除该类。确保所引用的CSS类存在并正确命名。
对于解决ng-class不能编译/工作的问题，可以尝试以下方法：
- 检查语法：确保ng-class指令的语法正确无误，根据官方文档或相关教程进行参考。
- 检查作用域：确保ng-class指令在正确的作用域中使用，可以通过调试工具查看作用域链来确认。
- 检查数据绑定：确保ng-class指令与正确的数据进行绑定，并确保数据的变化能够正确触发ng-class的更新。
- 检查CSS类：确保ng-class指令中引用的CSS类存在，并且正确命名。
腾讯云提供了一系列与Angular开发相关的产品和服务，例如：
- 云服务器（CVM）：提供可扩展的虚拟服务器实例，用于部署和运行Angular应用程序。了解更多：云服务器产品介绍
- 云数据库MySQL版（CDB）：提供高性能、可扩展的MySQL数据库服务，适用于存储Angular应用程序的数据。了解更多：云数据库MySQL版产品介绍
- 云存储（COS）：提供安全可靠的对象存储服务，用于存储Angular应用程序中的静态资源文件。了解更多：云存储产品介绍
请注意，以上仅为示例，腾讯云还提供其他与Angular开发相关的产品和服务，具体可根据实际需求进行选择和使用。
相关·内容
我有一个表单，一些输入字段是用我无法访问的外部脚本动态填充的。字段已填充，但当我提交时，它认为它们是空的。
有没有办法在不添加外部库的情况下做到这一点？
我有作用域。$watch，但我可能做错了。附件是代码。
编辑:我在代码中使用的jQuery只是用来添加输入值，以模拟外部脚本。用户将单击一个按钮，该按钮将自动填充输入字段。我不能在我的实际代码中使用jQuery，这需要与jqlite 100%的角度。
// create angular app
var validationApp = angular.module('validationApp', []);
// crea
浏览 0提问于2017-08-19得票数 1
我有以下html，当使用$dirty更改输入时，它可以工作并更改div的类：
<div class="text-input" ng-class="{typing : (loginForm.test.$dirty || loginForm.test.length > 0)}">
<span>Username</span>
<input type="text" name="test" ng-model="user.name" placeholder="te
浏览 1提问于2014-02-10得票数 2
回答已采纳
当路径为http://localhost/#/或http://localhost/#/main/时，我试图设置类http://localhost/#/main/，因为这两个路径都是相同的页面。
为什么ng-class="{'class1' : expression1, 'class1' : expression2}"不能工作？
控制器
angular.module('testApp')
.controller('NavmenuCtrl', function ($scope, $location) {
$sc
浏览 4提问于2014-08-19得票数 1
回答已采纳
1回答
我对Angular有些陌生，所以这可能是我明显缺少的东西，但是...
我有一个有三个主要部分的页面:顶部，中间，底部。顶部的导航按钮调用JS函数，这些函数使用$.ajax()查找页面，然后填充中间部分。但是，包含的文件中的angular引用不起作用。就像它看不到控制器一样。ng-controller位于body标记上，但我也将其放在包含文件的div中，以防这是原因，但无济于事。
angular代码是不是不知道控制器，因为它是在主页之后加载的？
如何才能让包含文件中的angular代码正常工作？我特别使用了ng-click和ng- controller，但我也尝试了从控制器内部输出一个变量，它只
浏览 0提问于2015-01-01得票数 0
我使用Bootstrap中的CSS类突出显示有错误的字段，如下所示：
<div class="form-group" ng-class="{'has-error': $ctrl.form.name.$invalid && $ctrl.form.name.$touched}">
<label for="name">Name</label>
<input type="text" id="name" name="name&#
浏览 0提问于2018-07-23得票数 0
回答已采纳
以下是我想要做的事情
$sce.trustAsHtml('<span ng-class="getIconColor('+ myColor +')">')
在我的HTML代码中
<span ng-class="red">
但是，我希望ng-class属性在$sce返回之前得到评估。有点像这样，我的代码才能工作
<span ng-class="red" class="red">
这是如何做到的呢？
浏览 2提问于2017-11-23得票数 1
回答已采纳
我正在尝试在angular类(ng- class )指令中混合编写三元和布尔表达式。但是我找不到正确的语法来使它工作，或者在web上找到一个像样的例子。
我知道在angular类指令中，我们可以编写一个三元表达式，如下所示。
<... ng-class="isAdmin ? 'enabled' : 'disabled'" ...>
和布尔表达式，如。
<... ng-class="{visible:isPowerUser}" ...>
但是有没有办法像这样混合它们呢？
<... ng-class=&#
浏览 2提问于2014-01-01得票数 1
如何将指令元素附加到其模板中？就像这样：
.directive('labelize',function(){
return {
restrict: 'A',
template: '<div><ng-element/></div>'
...
}
});
# Html
// <input labelize name="name"/>
# Output
// <div><input name="name"
浏览 5提问于2015-10-10得票数 0
回答已采纳
1回答
我目前正在重写一些新组件语法的旧指令。我的指令之一需要在DOMnode上切换一个类。
<my-directive ng-class="$ctrl.getClassList()">
<!-- DIRECTIVE CONTENT -->
</my-directive>
现在，当我把它转换成组件时，这个功能就不再起作用了。是否有一些我没有发现的新功能？还是根本就不可能了？
<my-component ng-class="$ctrl.getClassList()">
<!-- COMPONENT CO
浏览 2提问于2016-07-22得票数 1
3回答
我如何可能使li文本垂直对齐‘列表圈’。如果不移动圆圈，我就不能把文字往上移动一点。是否有只在li文本上工作的CSS样式？
预期最终结果
angular.module('app',[])
.controller('mainCtrl',function(){
var vm = this;
vm.disableSave = true
})
.password-strength {
list-style: none;
}
.password-strength > li:before {
font-family: Ionicons !
浏览 0提问于2018-10-03得票数 0
回答已采纳
1回答
我正在尝试通过控制器自定义表单验证。我想检查是否所有必填字段(两个文本字段和一个复选框)都是空的，但它不能像预期的那样工作。
$scope.update = function() {
angular.forEach( ['lastName', 'umail'], function (input) {
if ( !$scope[input] ) {
alert( 'Input: ' + input.name );
angular.element( $(input) ).css('bo
浏览 5提问于2016-08-29得票数 0
由于我的AngularJS不工作代码，我缺少什么？目前，我正在尝试重构AngularJS工作代码。据我理解，这个关键字相当于$scope。另外，对于我的AngularJS不工作的代码，我试图理解它为什么不能工作。我见过工作代码使用这种模式。我想了解更多的情况。
AngularJS工作
<script>
var app = angular.module("app", []);
app.controller("ClassController", function ($scope) {
$scope.classBold =
浏览 2提问于2017-09-21得票数 0
回答已采纳
这是我的html代码，但我认为ng-init不起作用。
<div ng-init="accordion=1">
<h3 class="accordion" ng-class="{active:accordion==1}">
<a href ng-click="accordion = 1">Section 1</a>
</h3>
<p class="accordion-conten
浏览 0提问于2016-03-29得票数 0
我在我的模板中使用了accordion指令，在accordion中我在一个元素上添加了attr ng-click。当我单击该元素时，它会触发两次。
小提琴：
代码：
//accordion directive
.directive('simpleAccordion', function($compile, $timeout) {
return {
restrict: 'AEC',
controller: function($scope) {
$scope.current = null;
浏览 15提问于2016-09-26得票数 1
回答已采纳
2回答
当创建带有隔离作用域的指令时，我不能访问指令元素的范围属性(在角1.0.7中不是这样，而是在以后的版本中(例如1.2.17))。
angular.module("app", []).directive("red", function() {
return {
scope: {},
link: function(scope) {
scope.isRed = true;
}
};
});
.red {
color: #ff0000;
}
<div red ng-class="{red: isRed}&
浏览 2提问于2014-10-05得票数 3
回答已采纳
请帮我回答下一个问题
我尝试使用ng-class在div块上实现条件类，但遇到了下一个问题--“它不工作”。例子看起来很简单，我甚至不知道还能用什么来描述。
但是还有一个想法-控制器不工作而不是ng-class……我不知道。
在这里你可以看到我的代码，也许你会发现smth错误或者给我一个建议。
demoApp = angular.module('demoApp',[]);
var controllers = {};
controllers.testCntr = function ($scope)
{
$scope.setClass = function()
浏览 9提问于2015-08-13得票数 0
我的自定义指令在加载页面时运行良好，但是当使用追加添加时，它不能正常运行。它在运行时不显示其内容。
HTML：
<!doctype html>
<html lang="en" ng-app="module1">
<head>
<meta charset="UTF-8">
<title>Angular Demo</title>
<link rel="stylesheet" href="css/bootstrap.css">
浏览 3提问于2015-05-29得票数 0
回答已采纳
1回答
角1.5和音隙中的控制器/路由
、、、、
我正在编写一个移动应用程序的代码，从一个遥远的json中检索信息，并在上面循环以显示一个表。
当我使用build.phonegap.com时，所有的东西都不起作用，但在以下情况下起作用：
我在phonegap桌面(windows)上预览了它
我从我的android中从phonegap应用程序访问服务器
我在本地使用节点js为模拟器构建应用程序，等等：
phonegap运行android -详细
其他角度功能似乎有效。例如，要显示菜单的wich选项卡当前处于活动状态，我使用：
<a href="#home" ng-click="menu='
浏览 4提问于2016-05-29得票数 0
2回答
我需要呈现一个angular指令，通过调用先前在变量(通常在控制器中声明)定义的字符串来选择它。尽管这样的变量可以作为角度表达式访问，但当我尝试使用来选择指令时，它不起作用：
<!DOCTYPE html>
<html ng-app="app">
<body ng-controller="TextController">
<!-- item.dir is accessible: -->
<div>Value of item: {{item.dir}}</div>
<!-- It w
浏览 2提问于2014-10-09得票数 3
0回答
我有一个这样的元素：
<div class="someclasses" ng-class="{'new-class': function()}">
如果使用ng-click，我们可以通过传递$event来获取元素。如下所示：
<div class="someClasses" ng-click="function($event)">
然后像这样获取目标元素：
$scope.function = function($event) {
console.log($event.currentT
浏览 4提问于2017-11-29得票数 1
回答已采纳
我想知道是否有可能在我的Angular 2组件中添加.scss文件？
假设我有以下内容：
@View({
template: `
<div class="button" [ng-class]="{active: isOn, disabled: isDisabled}"
(click)="toggle(!isOn)">
Click me!
</div>`,
styleUrl: ['style.scss'],
directives: [NgC
浏览 1提问于2016-03-09得票数 3
1回答
我尝试将ng-class与一个名为has-warning的css类一起使用。问题是Angular似乎将-解释为减号，并试图将has减去warning，这会抛出一个错误。所以这不管用-
ng-class="{has-warning: form.name.$dirty && name.length == 0}"
我还能怎么写我的ng类呢？不，我不能重命名has-warning
浏览 0提问于2014-11-21得票数 0
1回答
我有一些输入type=date字段，我正试图通过Angular强制使用今天的最小日期。
根据Angular文档，min=和max=应该都可以工作，但它们都不能工作。我的表单从来不会被标记为无效，即使日期字段无效。
我正在测试Chrome Beta，但这是用Cordova/PhoneGap应用程序编写的，可以在iOS 7上运行。这两个地方都不能工作。
我的字段如下所示：
<input name="dateDue" ng-class="{ invalid: form.myForm.dateDue.$invalid }" type="date"
浏览 5提问于2014-05-14得票数 1
我正在尝试使用角模块在nodeJS应用与快递4和翡翠。
因此，我做了npm install angular --save和var angular = require('angular');在app.js。
，但它正在抛出一个错误
e:\Project\node_modules\angular\angular.js:29016
})(window, document);
^
ReferenceError: window is not defined
at Object.<anonymous> (e:\Project\node_modules\angula
浏览 1提问于2015-12-23得票数 2
回答已采纳
嗨，我关注了angular js中的tab，它工作得很好
<section class="panel-body">
<ul class="nav nav-tabs" ng-init="activeTab = 'details'">
<li ng-class="{ active: activeTab === 'details' }">
<a ng-click="activeTab
浏览 11提问于2017-01-13得票数 2
回答已采纳
我正在尝试用类似于以下的Angular js在表的tr中动态地附加类：
ng-class="{
'text-light' : inventory.newValue.disabled,
'odd' : inventory.rowNumber % 2 === 1,
{{inventory.first? 'loc-'unit.attachNumber : 'bldg-'inventory.parent.attachNumber }}
}"
但是它不工作，有没有人能帮我，我怎么才能在
浏览 0提问于2019-11-07得票数 0
我是AngularJS的新手。
有人能解释一下为什么active类不能在以下代码中的选项卡之间切换：
angular.module('myApp', [])
.filter('split', function () {
return function (input, string) {
var temp = string.split('|');
for (var i in temp)
input.push(temp[i]);
return input;
};
浏览 2提问于2013-12-10得票数 1
回答已采纳
1回答
我在独立的tomcat服务器上部署了阔叶演示站点，mysql作为后端和独立的solr服务器。我可以在8983端口上访问solr服务器。我看到我的核心可以在和catalog_reindex上使用(请注意url中的散列)。我将common-shared.properties文件更改为指向正确的URL，但是当我尝试点击SiteApplication时，我会得到以下错误
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
浏览 0提问于2018-03-10得票数 0
回答已采纳
2回答
使用角指令作为自定义指令的属性
、、、、
我试图编辑这位绅士的小提琴()，以添加ng单击功能到窗格。
我的目标是将ng单击函数添加到窗格指令中，以便在单击此操作时运行指定的操作。
示例：
<tabs>
<pane ng-repeat="candy in candies" title="Tasty {{candy.name}}" ng-click="addChocolate(candy)">
</tabs>
在片段中，您将看到窗格指令通过在选项卡的控制器中调用addPane来工作，并将自身添加到其窗格列表中。选项卡指令负责处理单击事件并显示正确的
浏览 0提问于2015-12-17得票数 0
我是个新手，以前和Angular一起工作过很多次。在Angular中，根据变量分配某些类非常简单，如下所示：
<p ng-class="{warning: warningLevel==3, critical: warningLevel==5}">Mars attacks!</p>
我如何使用React在模板中做类似的事情？
浏览 0提问于2014-10-03得票数 5
我用<ng-view>指令尝试了部分视图，我在部分视图中使用了另一个控制器，在部分视图文件本身中使用了控制器脚本，但是它不能工作，它在控制台中显示错误。
下面是代码
index.html
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.co
浏览 4提问于2016-10-17得票数 0
角1.5
我正在创建一个菜单，在ng-click=上，我将获取变量，而不是在ng类上，将该变量设置为针对菜单和内容的true。
目标是单击将活动类添加/移除到父类和内容div。
我不能把我的头绕着这个
<div ng-controller="myCtrl">
<ul>
<li class="animate" ng-class="{activelist: fonts ==!hidden }">
<a ng-click="activeMenu('fonts')" cla
浏览 0提问于2017-01-07得票数 0
回答已采纳
1回答
角1动态形状物体
、、、、
我使用了角1并创建了一个动态的形式。它的工作方式是循环遍历一些对象并呈现动态绑定的输入字段，如：
<div class="quest-form form-group" ng-repeat="task in tasks">
<div ng-if="task.Class == 'TaskText'" ng-class="'task ' + task.Class">
<input ng-model="questForm
浏览 9提问于2017-07-26得票数 0
回答已采纳
2回答
我有一个非常简单的Angular App，我正在尝试结合使用ng-repeat和ng-class来重复模板，并根据绑定的数据的属性之一将不同的类应用到外部div。
当我使用一个简单的.
ng-class="message.type"
...but不幸的是，我需要将一个字符串连接到消息类型的开头。
我试着在这里创建一个JSfiddle ...
..。但这也是我第一次尝试制作JSfiddle，我肯定做错了什么，因为Angular的东西似乎不能运行。它确实显示了我试图用表达式来做什么。
任何帮助都将不胜感激。
浏览 3提问于2012-12-25得票数 15
回答已采纳
1回答
我需要在"nextBtn“中添加ng-disabled指令，因为在某个条件为真之前，该按钮需要保持禁用状态。有可能吗？ng-if或ng-class也是如此。我不能在模板中使用它们，我也不知道为什么..这是我的情况：
function elementTourTemplate(content, isEnd){
return '<div class=\"row custom-color\">' +
'<div id=\"pop-over-text\" class=
浏览 0提问于2016-04-07得票数 3
我有一个bootstrap 3菜单，我正在尝试使用Angular JS。
我已经让基本菜单正常工作了，ng-class也正常工作了，只在菜单中应用它就有了孩子。
我现在尝试做的是，只有当父LI具有子数据时，才有菜单"work“(显示第二个嵌套的UL)。所以，我有这样的想法：
<ul class="nav navbar-nav">
<li ng-class="{'dropdown':(n.children.length)}" ng-repeat="n in navData">
浏览 2提问于2014-03-19得票数 1
1回答
所以我不能让它工作，我有以下代码
HTML：
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\&
浏览 0提问于2014-07-30得票数 1
在angular.js中，如何在单击元素时切换css类active？我知道我可以使用ng-class和ng-click，但是如何引用自己呢？例如，假设我有三个按钮：
<a class="btn" ng-click="" ng-class"">First</a>
<a class="btn" ng-click="" ng-class"">Second</a>
<a class="btn" ng-click="" ng
浏览 3提问于2014-07-31得票数 0
回答已采纳
1回答
<div ng-repeat="app in fields track by $index">
<span class="{{app.icon}}"></span>
<span ng-class="app.icon"></span>
</div>
var originalFields = [
{title: 'Text Field', icon: 'fa-pencil'},
{title: 'Multiple Ch
浏览 0提问于2015-04-24得票数 0
我正在尝试从json对象向我的指令动态添加指令名称。然而，Angular只插入从JSON树中拉出的指令名称一次，一旦插入名称，Angular就无法识别和编译动态子指令。
我尝试将interpolate服务添加到我的DDO中，这样我就可以手动插入JSON值，然后进行Angular编译。
然而，我没有定义$interpolate(tAttrs.$attr.layout)，当我试图访问attr布局时，我将json对象作为布局传递给我的独立作用域。我的问题是，如何在预链接中或编译前访问布局对象值，以便能够内插值并注入它们。
或者我需要像这里描述的那样重新编译angular：
任何帮助都是最好的。
{
浏览 0提问于2015-11-25得票数 1
我是angularJS的初学者，我正在使用node/bower/grunt为angularJS中的一个单页面应用程序开发ui，并且我已经安装了angular-ui-bootstrap以及来自angular-ui-utils的路由和事件实用程序。
我已经在菜单项上使用了ng-class={active:$uiRoute}，但是当一个菜单项被选中时，活动类不是applied...does，$uiRoute来处理它，或者我需要单独编码它？
很抱歉问了一个愚蠢的问题。
代码如下：
`<div class="collapse navbar-collapse">
<u
浏览 2提问于2013-11-15得票数 12
1回答
我正在尝试构建一个指令，用于为缓慢的ajax调用更改按钮的加载状态。基本上，我们的想法是为一个按钮元素设置一个属性"ng-loading“，然后让指令添加剩下的东西。
这是html代码：
<button class="btn btn-primary" name="commit" type="submit" ng-loading="signupLoading">
Submit
</button>
这是指令代码：
.directive('ngLoading', ['$comp
浏览 1提问于2014-07-28得票数 16
回答已采纳
下面是我的密码。当用户单击“选择所有”时，所有项目都会被选中。
我想要的是当用户点击任何选项，该选项应该被禁用。
var app = angular.module('sampleApp', []);
app.controller('sampleController', ['$scope',
function($scope) {
$scope.selectAll = false;
}
])
.disabled {
opacity: 0.5
}
<script src="https://ajax.googlea
浏览 3提问于2016-04-06得票数 0
回答已采纳
1回答
我相信这是以前有人问过的，但很难提出一个问题，因此，也很难找到.
我的一款应用程序使用了几个第三方指令之一。目前，我正在处理的指令是库中的指令，但这个问题并不仅仅是关于这个库的，因为我以前遇到过这样的需求。
目前，我的代码如下所示：
<div ng-switch on="editTypeNeeded">
<div ng-switch-when="textarea" editable-textarea="myVar" onbeforesave="doBeforeSaveStuff($data)" class
浏览 1提问于2015-04-02得票数 2
回答已采纳
1回答
我有一个包含元素的div，这些元素依赖于ng-class来设置一些样式属性(它调用一个返回类字符串的函数)。通常，当div中的内容被修改时，Angular会为我重新计算所有的ng-class变量。但是，我在这个div之外有一个按钮，可以简单地向它添加一个类来更改它的宽度；当发生这种情况时，Angular不会重新计算ng-class函数。只有在我在div中做了一些操作之后，它才会为我计算所有的东西。有没有办法在按下这个外部按钮后强制Angular重新计算？
浏览 2提问于2015-12-07得票数 0
我是Angular的新手，我正在尝试做一些东西，如果你点击一个标签，ng-repeat将显示具有特定属性的所有内容，如果你单击不同的标签，ng-repeat将显示具有不同属性的所有内容。然而，我不能让tab控制器与ng-show一起工作。下面是我的代码：
<ul class = "nav nav-pills" ng-controller = "TabController as tabCtrl">
<li ng-class="{'active':tabCtrl.isTab(1)}">
浏览 0提问于2015-05-30得票数 3
1回答
我使用的是角度树。它工作得很好，但是当分支不工作时，节点的间距……也就是说，它们都在直线上，而不是在彼此之间的一定距离上。另外，我在浏览器控制台上得到了这个错误。
Error: Lexer Error: Unexpected next character at columns 36-36 [?] in expression ['level-' + 1 + (row.branch.selected ? ' active':'')].
at Error (<anonymous>)
at throwError (http://localh
浏览 0提问于2013-09-17得票数 0
1回答
我试图添加一个类(引导活动类)使用角度ngClass在我的导航菜单上，根据路径。
navigationMain模板：
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-12" ng-controller="MainCtrl">
<ul class="nav nav-pills nav-just
浏览 3提问于2017-04-12得票数 0
回答已采纳
1回答
我有以下锚标签：
<a href="#/home" ng-class="{ active: navCtrl.checkCurrent('home')" ng-click="navCtrl.setLink('home')" class="navigation-anchor">Home</a>
我已经通过向这个锚的class属性手动添加active来确认我的类产生了预期的结果。我还确认，当我单击此链接时，nav.Ctrl.checkCurrent('home')的
浏览 1提问于2015-06-29得票数 0
1回答
我创建了一个angular 1.x星级组件。需要存在组件的多个实例，从而具有不同的额定值。
但是，我找不到从组件中读取starCount变量的方法。我试着浏览了文档，尝试了binding属性，但是没有用。
这在Vue.js中只需要一个v-model属性，但是我找不到类似的angular属性。
var app = angular.module('app', []);
app.component('star', {
template: `<ul class="star">
<li class="fa
浏览 5提问于2018-08-09得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
