Question

我是AngularJS的新手，我正在开展一个小项目，以了解事情是如何运作的。

基本上我想要一个单页应用程序，我可以动态地更改页面的一部分以包含来自其他文件的html。这个其他文件有一个控制器等。我希望网址保持不变。我需要使用变量名动态加载页面。

现在，我可以从导入的模板中加载HTML，但是排除了大量的HTML并且所有的＆＃34; ng＆＃34;标签不见了。我认为这意味着这个新页面无法找到控制器，或者很多东西正在编译或者其他东西。也许我没有按正确的顺序导入东西？我不知道。这是我的基本布局：

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>

我试过在html文件中包含javascript无济于事。我也无法使用ng-include工作。

Answer 1

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

AngularJS：使用控制器动态加载HTML

1 个答案: