Javascript ng类未在html外部更新

我在我的项目中使用了以下代码。 很抱歉，我将无法共享任何plunker或jsfiddle

    <div class="container full-height" ng-class="{'navmargin': model.showHeaderBasedError}" data-ui-view="main_container"></div>
{{model.showHeaderBasedError}}

{{model.showHeaderBasedError}}

---

作为输出状态：html外部使用的变量工作正常，但html中使用的变量未更新。

ng类

与

ui视图

不兼容，您可以通过升级解决此问题 angular 1.3.8和ui路由器0.2.13

这里是GitHub

更新

尝试使用ng attr指令，这将对您有所帮助

ng-attr-class="{{model.showHeaderBasedError? 'navmargin': ''}"

---

ng类

与

ui视图

不兼容，您可以通过升级解决此问题 angular 1.3.8和ui路由器0.2.13

这里是GitHub

更新

尝试使用ng attr指令，这将对您有所帮助

ng-attr-class="{{model.showHeaderBasedError? 'navmargin': ''}"

---

您可以尝试在ng类中使用此方法-

ng-class="{ 'nav-top-margin' : !model.showHeaderBasedError }"

假设

！model.showHeaderBasedError

是一个布尔值，如果为true，则该类将存在，如果为false，则不会存在

如果您有多个场景，您可以向ng类添加多个参数

 ng-class="{ 'nav-top-margin' : !model.showHeaderBasedError, 'class2' : expression2, 'class3' : expression3, 'class4' : expression4 }"

---

您可以尝试在ng类中使用此方法-

ng-class="{ 'nav-top-margin' : !model.showHeaderBasedError }"

假设

！model.showHeaderBasedError

是一个布尔值，如果为true，则该类将存在，如果为false，则不会存在

如果您有多个场景，您可以向ng类添加多个参数

 ng-class="{ 'nav-top-margin' : !model.showHeaderBasedError, 'class2' : expression2, 'class3' : expression3, 'class4' : expression4 }"

---

我创建了一个带有ui路由器的JSFIDLE来帮助您。model.showHeaderBasedError的布尔值正在更新HTML中的类

JS

angular.module（'DemoApp'，['ui.router']）.config（函数（$stateProvider，$urlRouterProvider）{
$urlRouterProvider。否则（“/state1”）；
$stateProvider.state（'state1'{
url:“/state1”，
观点：{
“主容器”：{
templateUrl:“partials/state1.html”
}
}
}).州（“州2”{
url:“/state2”，
观点：{
“主容器”：{
模板：“State2”
}
}
});
}).controller（'DemoCtrl'，['$scope'，函数（$scope）{
$scope.model={
showHeadErbSedError:false
};
$scope.triggerror=函数（）{
$scope.model.showHeaderBasedError=！$scope.model.showHeaderBasedError；
};
}]);

HTML

国家1
国家2
信息
{{model.showHeaderBasedError}}
触发错误

---

希望有帮助。

我创建了一个带有ui路由器的JSFIDLE，试图帮助您。model.showHeaderBasedError的布尔值正在更新HTML中的类

JS

angular.module（'DemoApp'，['ui.router']）.config（函数（$stateProvider，$urlRouterProvider）{
$urlRouterProvider。否则（“/state1”）；
$stateProvider.state（'state1'{
url:“/state1”，
观点：{
“主容器”：{
templateUrl:“partials/state1.html”
}
}
}).州（“州2”{
url:“/state2”，
观点：{
“主容器”：{
模板：“State2”
}
}
});
}).controller（'DemoCtrl'，['$scope'，函数（$scope）{
$scope.model={
showHeadErbSedError:false
};
$scope.triggerror=函数（）{
$scope.model.showHeaderBasedError=！$scope.model.showHeaderBasedError；
};
}]);

HTML

国家1
国家2
信息
{{model.showHeaderBasedError}}
触发错误

---

---

希望能有所帮助。

你想用它切换什么类你想用它切换什么类如果我的类名是nav top margin，那么？？问题是这个变量是动态的，可能会根据连接状态而变化。因此，在这种情况下，HTML中的变量更新了，但class属性没有反映正确的类。您可以检查问题中更新的图像。我已经更新了angular和ui路由器版本。但是还是一样的。让我们来看看。我也尝试过实现ng风格。但是同样的问题仍然存在。如果我的类名是nav top margin，那么问题是这个变量是动态的，可能会根据连接状态而变化。因此，在这种情况下，HTML中的变量更新了，但class属性没有反映正确的类。您可以检查问题中更新的图像。我已经更新了angular和ui路由器版本。但是还是一样的。让我们来看看。我也尝试过实现ng风格。但同样的问题仍然存在。问题是这个变量是动态的，可能会根据连接状态而变化。因此，在这种情况下，变量会更新，但HTML中的class属性不会反映正确的class@Ayush你可以添加多个参数，如果你能更具体地说明你的意思，我可以更好地回答。什么变量正在更新，以及它应该如何反映在类中（将其更改为另一个类或？）我想说的是，{{！model.showHeaderBasedError}反映的是正确的值。但是当我尝试使用您提到的属性时，class属性没有反映正确的值。@Ayush是{{！model.showHeaderBasedError}一个您也希望作为类的布尔值？是的。所以它可能是真的，也可能是假的。但是is应该出现在类属性中。事实上，这个变量是动态的，可能会根据连接状态而变化。因此，在这种情况下，变量会更新，但HTML中的class属性不会反映正确的class@Ayush你可以添加多个参数，如果你能更具体地说明你的意思，我可以更好地回答。什么变量正在更新，以及它应该如何反映在类中（将其更改为另一个类或？）我想说的是，{{！model.showHeaderBasedError}反映的是正确的值。但是，当我尝试使用您提到的属性时，class属性没有反映正确的值。@Ayush是{{！model.showHeaderBasedError}一个您也希望作为类的布尔值？是的