Question

我正在尝试在{{ }}内打印变量，但它不起作用。当我使用data-ng-bind时，它工作得很好，但我需要在HTML标签内打印一些变量。

这是我的代码：

HTML：

<aside class="main-sidebar" data-ng-controller="MenuController as menu" ng-show="menu.user.authenticated">
<section class="sidebar">
    <ul class="sidebar-menu" ng-repeat="category in items.sidebar">
        <li class="header" ng-show="!category.needAdmin || menu.user.isAdmin == category.needAdmin">{{category.name}}</li>
        <li ng-class="{'treeview': element.elements.length > 0}" ng-repeat="element in category.elements" ng-if="category.elements.length > 0">
            <a href="#">
                <i class="fa fa-{{element.fa-icon}}"></i> {{element.title}} <i class="fa fa-angle-left pull-right"></i>
            </a>
            <ul class="treeview-menu" ng-if="element.elements.length > 0">
                <li ng-repeat="subelement in element.elements" ui-route="/{{subelement.link}}" ng-class="{active: $uiRoute}">
                    <a mean-token="subelement.link" ui-sref="{{subelement.link}}"><i class="fa fa-circle-o"></i> {{subelement.title.length}}</a>
                </li>
            </ul>
        </li>
    </ul>
</section>

JS：

'use strict';

angular.module('mean.system').controller('MenuController', ['$scope', '$rootScope', 'MeanUser', '$state',
function($scope, $rootScope, MeanUser, $state) {

    var vm = this;
    vm.user = {
        authenticated: MeanUser.loggedin,
        user: MeanUser.user,
        isAdmin: MeanUser.isAdmin
    };

    $scope.isCollapsed = false;

    $rootScope.$on('loggedin', function() {
        vm.user = {
            authenticated: MeanUser.loggedin,
            user: MeanUser.user,
            isAdmin: MeanUser.isAdmin
        };
    });

    vm.logout = function(){
        MeanUser.logout();
    };

    $rootScope.$on('logout', function() {
        vm.user = {
            authenticated: false,
            user: {},
            isAdmin: false
        };
        $state.go('auth.login');
    });

    $scope.items = {
        'top': [
            {
                'title': '',
                'link': '',
                'needAdmin': false,
                'elements': [
                    {
                        'title': '',
                        'link': ''
                    }
                ]
            }
        ],
        'sidebar': [
            {
                'name': 'DOCUMENTACIÓN',
                'needAdmin': true,
                'elements': [
                    {
                        'title': 'Artículos',
                        'link': '',
                        'fa-icon': 'check',
                        'elements': [
                            {
                                'title': 'Ver Artículos',
                                'link': 'all articles'
                            },
                            {
                                'title': 'Crear Artículo',
                                'link': 'create article'
                            }
                        ]
                    }
                ]
            }
        ]
    };
}
]);

我尝试使用$ rootScope而不是$ scope但仍无法正常工作

Answer 1

如果您的data-ng-bind工作正常，建议您使用它。出于某种原因（在this问题中详细说明），最好使用ng-bind而不是{{ }}。简而言之，这是关于页面刷新/加载的全部内容。 ng-bind避免在设置数据之前看到某些内容，即使数据未设置，也会显示meawhile {{ }}。

如果您需要在HTML中打印var，只需使用span即可。它将是这样的：

 <span data-ng-bind="element.title"></span>

修改：

关于类，其中一种方法是，如果必须动态设置名称，则是一个函数。例如：

$scope.appliedClass = function(element) {
        return "fa-"+element.fa-icon; 
}

然后在你的HTML中：

<i class="fa" ng-class="menu.appliedClass(element)"></i>

没有data-ng-bind就无法打印var

1 个答案: