ng-class 未在 html 之外更新

Question

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

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

作为输出状态：html 之外使用的变量工作正常，但 Html 中使用的变量没有更新。

Answer 1

ng-class 与 ui-view 不兼容，您可以通过升级来解决此问题 angular 1.3.8 和 ui-路由器 0.2.13.

GitHubIssue Link这里

更新

尝试对您有帮助的 ng-attr 指令。

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

Answer 2

您可以尝试将此方法与 ng-class -

一起使用

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

假设 !model.showHeaderBasedError 是一个布尔值，当它为真时，class 会在那里，如果它为假，则不会。

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

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

Answer 3

我用 ui-router 创建了一个 jsfiddle 试图帮助你。 model.showHeaderBasedError 的布尔值正在更新 HTML.

中的 class

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>

希望对您有所帮助。

ng-class 未在 html 之外更新

ng-class not updating outside the html

javascript

web

angularjs

ng-class

angularjs-ng-class