1

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

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

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述
作为输出状态：在 html 之外使用的变量工作正常，但在 Html 中使用的变量没有更新。

4

3 回答 3

0

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

GitHub问题链接在这里

更新

试试 ng-attr 指令，它会帮助你。

ng-attr-class="{{model.showHeaderBasedError? 'navmargin': ''}"
于 2015-07-24T14:15:18.053 回答
0

您可以尝试将此方法与 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 }"
于 2015-07-24T14:16:22.977 回答
0

我用 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>

希望能帮助到你。

于 2015-07-24T15:08:46.023 回答