0

私は AngularJS を使い始めたばかりなので、明らかな答えが存在する場合は申し訳ありません。私はウェブ全体を見てきましたが、答えを見つけることができず、間違った道を進んでいる場合に時間を無駄にしたくありません.

テンプレート HTML ファイルを作成して自分のサイト (header.html/footer.html など) に読み込み、Angular を使用してその外観を制御したいと考えています。これは、AngularJS ディレクティブと静的 html ファイルを使用して正常に機能しています。

JS

App.directive('load', function() {
    return {
        replace: true,
        restrict: 'E',  
        templateUrl: "inc/header.html"
    };
});

HTML

<div ng-app="myApp">
<div>Static Text</div>
   <load></load>
 </div>

load.html

<p>Loaded text</p>

これは問題なく動作しますが、AngularJS 機能を load.html に含めることは可能ですか? もしそうなら、どうすればこれを達成できますか？何か不足していますか？

例えば

load.html

<div id="main" ng-app>

    <nav class="{{active}}" ng-click="$event.preventDefault()">
         <a href="#" class="home" ng-click="active='Link 1'">Link 1</a>
    </nav>
    <p ng-show="active">You just clicked <b>{{active}}</b></p>
</div>

ありがとう

4

1 に答える 1