How to use ng-template in angular?

Question

I'm writing a client-side angular app and I have a question related to the way I can use angular's ng-template .

So, I have this navbar :

<nav class="navbar navbar-inverse" >
        <div class="container-fluid">              
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <!--<li class="active"><a href="#">Home</a></li>-->
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Events <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Create Event</a></li>
                            <li><a href="#"></a></li>
                        </ul>
                    </li>
                    <li><a href="#">About</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right" ng-include="getTemplate()">

                </ul>
            </div>
        </div>
    </nav>

Ok, in the last <ul> tag I use ng-include="getTemplate()" , where getTemplate is this function:

<script type="text/javascript">
        $(function () {
            var getTemplate = function () {
                return "notauth";
            }
        })
    </script>

Basically, this will return the same template, but I just want this to work before I add more logic to it.

"notauth" template is:

<script type="text/ng-template" id="notauth">
        <li><a ui-sref="signup"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a ui-sref="login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </script>

Note that this is inside my index.html page, because I want my navbar to be the same for all views, but change its template according to user state: if user is logged in use auth template, otherwise use notauth template.

Problem is that this doesn't work and I can't figure out what the problem is.

Answer 1

Declare the function using $scope as follows:

  $scope.getTemplate = function () {
       return "notauth" ;
       console.log("notauth")
  }

Then you can call like this:

<ul class="nav navbar-nav navbar-right" ng-include="getTemplate()">

This works correctly.

Answer 2

The reason why your function doesn't work is because you define your function in a function (that is automatically called by jQuery) and is thus only available in the scope of that function.

But even if you were to add the getTemplate() to the global (window) scope, it would still not work as Angular looks for it on the current $scope object.

So the only way you can make this work:

<ul class="nav navbar-nav navbar-right" ng-include="getTemplate()">

Is if you somehow get getTemplate() onto the current $scope or the $rootScope . This can be accomplished by for instance the following code:

angular.module('myApplication', [])
    .run(['$rootScope', function($rootScope) {
        $rootScope.getTemplate = function() {
            return 'notauth';
        };
    }]);

Do note however that while something like this may work, you're much better of creating a component for this functionality which can then have an injectable controller that can actually perform smart logic.

Answer 3

ng-include="'notauth'" works like this, not ng-include="notauth"

So, try to do something like that.

<script type="text/javascript" >
    angular.module('app', []).
    controller('MainC', function($scope){
    $scope.call = function(){
      return 'notauth';
    }
  })
</script>