AngularJS：使用控制器動態加載HTML

Question

我是AngularJS的新手，並且正在從事一個小項目，以掌握事物的工作原理。

基本上，我希望有一個單頁應用程序，在其中我可以動態更改頁面的一部分以包含來自其他文件的html。 該另一個文件具有控制器等。 我希望網址保持不變。 我需要使用變量名動態加載頁面。

現在，我可以從導入的模板中加載HTML，但是很多HTML被排除在外，所有“ ng”標簽都消失了。 我的意思是說這個新頁面找不到控制器，或者很多東西都被編譯出來了。 也許我輸入的順序不正確？ 我不知道。 這是我的基本布局：

app.js

var app = angular.module('myApp', []);
app.controller('Main', function($scope) {
    $scope.htmlContent = 'somepage.html';
    $scope.externalPage = 'otherpage';
    $scope.changePage = function(page) {
        $scope[page]();
    }
    $scope.otherpage = function() {
        $scope.htmlContent = 'otherpage.html';
    }
});

app.controller('InternalPage', function($scope) {
    alert('hello world');
    $scope.content = "This is not showing";
});

的index.html

<div ng-controller="Main">
    <!-- This all works.  Clicking "Change Page" changes the 
         HTML referenced by the <div> tag -->

    <a ng-click="changePage(externalPage)">Change Page</a>
    <div ng-bind-html="htmlContent"></div>
</div>

otherpage.html

<div ng-controller="InternalPage">
    <p>{{content}}</p>
</div>

我嘗試將javascript包含在html文件中本身無濟於事。 我也無法使ng-include正常工作。

Answer 1

嘗試查看ng-include而不是ng-bind-html： https : //www.w3schools.com/angular/angular_includes.asp