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不兼容，您可以通过升级修复此问题角1.3.8和ui-router 0.2.13。

GitHub Issue Link这里

<强>更新

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

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

Answer 2

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

一起使用

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

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

如果您有多个场景，可以向ng-class

添加多个参数

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

Answer 3

我用ui-router创建了一个试图帮助你的jsfiddle。 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>

希望它有所帮助。

ng-class不在html之外更新

3 个答案: