ng-class不在html之外更新。
ng-class不在html之外更新。
提问于 2015-07-24 14:13:59
我在我的项目中使用了以下代码。很抱歉，我不能和别人分享任何东西
<div class="container full-height" ng-class="{'navmargin': model.showHeaderBasedError}" data-ui-view="main_container"></div>
{{model.showHeaderBasedError}}
作为输出状态:在html之外使用的变量工作得很好，但是Html中使用的变量没有更新。
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-07-24 14:15:18
ng-class与ui-view不兼容，您可以通过升级角1.3.8和ui路由器0.2.13来解决这个问题。
GitHub Issue Link在这里
更新
试试对你有帮助的ng-attr指令。
ng-attr-class="{{model.showHeaderBasedError? 'navmargin': ''}"Stack Overflow用户
发布于 2015-07-24 14:16:22
你可以尝试在ng类中使用这个方法-
ng-class="{ 'nav-top-margin' : !model.showHeaderBasedError }"假设!model.showHeaderBasedError是布尔值，当它是真时，该类就会存在，如果它是false，则不会。
如果有多个方案，则可以向ng类添加多个参数。
ng-class="{ 'nav-top-margin' : !model.showHeaderBasedError, 'class2' : expression2, 'class3' : expression3, 'class4' : expression4 }"Stack Overflow用户
发布于 2015-07-24 15:08:46
我创造了一个尝试帮助你的ui路由器。model.showHeaderBasedError的布尔值正在更新HTML中的类。
https://jsfiddle.net/bbLqxdwx/2/
JS
angular.module('DemoApp', ['ui.router']).config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/state1");
$stateProvider.state('state1', {
url: "/state1",
views: {
"main_container": {
templateUrl: "partials/state1.html"
}
}
}).state('state2', {
url: "/state2",
views: {
"main_container": {
template: "<b>State2</b>"
}
}
});
}).controller('DemoCtrl', ['$scope', function ($scope) {
$scope.model = {
showHeaderBasedError: false
};
$scope.triggerError = function () {
$scope.model.showHeaderBasedError = !$scope.model.showHeaderBasedError;
};
}]);HTML
<body ng-app="DemoApp">
<section data-ui-view="main_container"></section> <a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script type="text/ng-template" id="partials/state1.html">
<div ng-controller="DemoCtrl">
<div class="container full-height" ng-class = "{'navmargin': model.showHeaderBasedError}"> A message </div>
{{model.showHeaderBasedError}}
<button ng-click="triggerError()">Trigger Error</button>
</div>
</script>
希望能帮上忙。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31612829
复制相关文章
相似问题
腾讯云开发者
