Javascript 如何在angular中使用ng模板？

我正在编写一个客户端angular应用程序，我有一个问题与angular的

ng模板的使用方法有关

因此，我有一个
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>

基本上，这将返回相同的模板，但我只想在添加更多逻辑之前让它工作

“notauth”模板是：

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


报名
登录

请注意，这是在我的index.html页面中，因为我希望所有视图的导航栏都相同，但根据用户状态更改其模板：如果用户登录，请使用auth template，否则请使用notauth template

问题是，这不起作用，我无法找出问题所在。
ng include=“'notauth'”
是这样工作的，而不是
ng include=“notauth”

所以，试着做一些类似的事情

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


angular.module（'app'，[]）。
控制器（'MainC'，功能（$scope）{
$scope.call=函数（）{
返回“notauth”；
}
})
ng include=“'notauth'”
是这样工作的，而不是
ng include=“notauth”

所以，试着做一些类似的事情

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


angular.module（'app'，[]）。
控制器（'MainC'，功能（$scope）{
$scope.call=函数（）{
返回“notauth”；
}
})
使用$scope声明函数，如下所示：

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

然后你可以这样打电话：

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



这可以正常工作。
使用$scope声明函数，如下所示：

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

然后你可以这样打电话：

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



这是正确的。
函数不起作用的原因是您在函数（由jQuery自动调用）中定义了函数，因此只能在该函数的范围内使用

但是，即使要将
getTemplate（）
添加到全局（窗口）作用域，它仍然无法在当前
$scope
对象上查找它

因此，你唯一能做到这一点的方法是：

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

但是请注意，虽然这样做可能会起作用，但最好为该功能创建一个组件，该组件可以有一个可注入控制器，该控制器可以实际执行智能逻辑。
函数不起作用的原因是，您在函数中定义了函数（由jQuery自动调用）因此，只能在该功能范围内使用

但是，即使要将
getTemplate（）
添加到全局（窗口）作用域，它仍然无法在当前
$scope
对象上查找它

因此，你唯一能做到这一点的方法是：

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

但是请注意，尽管这样做可能会奏效，但您最好为此功能创建一个组件，该组件可以有一个可注入控制器，该控制器可以实际执行智能逻辑。
告诉我是否存在任何控制台错误？@CharanCherry控制台中没有任何内容您的身份验证模板是什么？@Sai尚未定义，但我现在不用它。我可能会删除注册和登录，并添加一些类似Profile和其他内容。设置一个变量，如
loggedin
。如果为true render
auth
，则为else render
noauth
。请告诉我是否存在任何控制台错误？@CharanCherry控制台中没有任何内容您的auth模板是什么？@Sai尚未定义，但我现在不使用它。我可能会删除注册和登录，并添加一些类似Profile和其他内容。设置一个变量，如
loggedin
。如果为true render
auth
，否则为render
noauth
。好的，如果我硬编码ng include=“'notauth'”，它会工作，但当我使用getTemplate（）时，不会调用此函数。我应该在哪里定义此函数？在控制器中定义它？如果我没有用于index.html页面的控制器怎么办？如果我硬编码ng include，请定义一个控制器Rok=“'notauth'”它有效，但当我使用getTemplate（）时，此函数未被调用。我应该在何处定义此函数？在控制器中定义它，如果我没有index.html页面的控制器该怎么办？定义控制器我没有为index.html页面定义控制器。我只使用ng应用程序，以后将使用的每个视图都有自己的控制器。在主控制器（即在Index.html控制器。我没有为我的index.html页面定义控制器。我只是使用ng应用程序，以后使用的每个视图都有自己的控制器。在主控制器（即index.html控制器）中定义此控制器。