1

クライアント側の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>

基本的に、これは同じテンプレートを返しますが、ロジックを追加する前にこれを機能させたいだけです。

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

navbar をすべてのビューで同じにしたいので、これは私の index.html ページ内にあることに注意してください。ただし、ユーザーの状態に応じてテンプレートを変更します。ユーザーがログインしている場合は auth テンプレートを使用し、そうでない場合は notauth テンプレートを使用します。

問題は、これが機能しないことであり、問​​題が何であるかを理解できません。

4

3 に答える 3

3

次のように $scope を使用して関数を宣言します。

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

次に、次のように呼び出すことができます。

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

これは正しく動作します。

于 2016-12-29T10:11:18.103 に答える
1

関数が機能しない理由は、(jQuery によって自動的に呼び出される) 関数で関数を定義し、その関数のスコープでのみ使用できるためです。

しかし、 をグローバル (ウィンドウ) スコープに追加したgetTemplate()としても、Angular が現在の$scopeオブジェクトでそれを探すため、機能しません。

したがって、これを機能させる唯一の方法は次のとおりです。

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

ただし、このようなものは機能する可能性がありますが、実際にスマートロジックを実行できる注入可能なコントローラーを持つことができるこの機能用のコンポーネントを作成する方がはるかに優れていることに注意してください。

于 2016-12-29T10:20:24.953 に答える