如何在 angular 中使用 ng-template？

Question

我正在编写一个客户端 angular 应用程序，我有一个关于如何使用 angular 的 ng-template.

的问题

所以，我有这个 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>

好的，在最后一个 <ul> 标签中我使用 ng-include="getTemplate()"，其中 getTemplate 是这个函数：

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

基本上，这将 return 相同的模板，但我只是希望它在我添加更多逻辑之前能够正常工作。

"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 模板，否则使用 notauth 模板。

问题是这行不通，我也不知道是什么问题。

Answer 1

ng-include="'notauth'" 是这样的，不是 ng-include="notauth"

所以，尝试做类似的事情。

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

Answer 2

使用 $scope 声明函数如下：

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

那么你可以这样调用：

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

这工作正常。

Answer 3

您的函数不起作用的原因是您在一个函数中定义了您的函数（由 jQuery 自动调用），因此仅在该函数的范围内可用。

但即使您将 getTemplate() 添加到全局 (window) 范围，它仍然无法工作，因为 Angular 在当前 [=13] 上查找它=]对象。

因此，您可以使用的唯一方法是：

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

就是如果你以某种方式将 getTemplate() 放到当前的 $scope 或 $rootScope 上。这可以通过例如以下代码来完成：

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

但是请注意，虽然这样的事情可能会奏效，但您最好为此功能创建一个组件，然后可以拥有一个可以实际执行智能逻辑的可注入控制器。

如何在 angular 中使用 ng-template？

How to use ng-template in angular?

html

javascript

jquery

angularjs

angularjs-templates