Angular JS动态模板文件

时间:2013-11-04 11:54:33

标签: javascript jquery angularjs angularjs-directive

我刚刚开始使用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>

这很好用,但我需要知道是否可以在我的load.html中包含AngularJS功能?如果是这样,怎么能实现呢?我错过了什么吗?

例如

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>

由于

1 个答案:

答案 0 :(得分:2)

ng-app中不需要load.html,它将作为当前应用的一部分加载。其他一切都应该按原样运作。

但在我看来,您正在复制ngInclude的功能。