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

Question

I'm trying to print vars inside {{ }} but it doesn't working. When I use data-ng-bind it works perfectly but I need to print some vars inside HTML tags.

Here's my code:

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'
                            }
                        ]
                    }
                ]
            }
        ]
    };
}
]);

I tried using $rootScope instead of $scope but still not work

Answer 1

If your data-ng-bind is working fine, it's recommended to use it. For some reason ( explain in details in this question) it's better to use ng-bind than {{ }} . Briefly it's all about the refresh/loading of your page. ng-bind avoid to see something before the data are set meawhile {{ }} will be show even if the data isn't set.

If you need to print the var in your HTML you can simply use span . It will be something like this :

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

Edit :

As regards the class, one of the way of doing it, is a function if you have to set the name dynamically. For example this :

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

And then in your HTML :

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