Question

使用以下代码：

$(function(){
    $("#includedContent").load("extraContent.html");
});

我通过jQuery将一个HTML文件包含到我的索引页面中（见上文）。我正在尝试将W3Schools站点中的简单AngularJS代码添加到extraContent.html，但它不起作用。例如......

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
    return $scope.firstName + " " + $scope.lastName;
};
});

有什么想法吗？

Answer 1

潜在 - ViewHolder Design pattern

本页介绍了Angular初始化过程以及如何在必要时手动初始化Angular。

可能更好 - https://docs.angularjs.org/guide/bootstrap

获取，编译并包含外部HTML片段。

Answer 2

我建议 bind-html-compile 。它是由AngularJS提供的指令。它将包含的文件视为角度代码而不是纯HTML /文本。相同的指令定义是：

(function () {
'use strict';

var module = angular.module('angular-bind-html-compile', []);

module.directive('bindHtmlCompile', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(function () {
                return scope.$eval(attrs.bindHtmlCompile);
            }, function (value) {
                element.html(value);
                $compile(element.contents())(scope);
            });
        }
    };
}]);
}());

有关详细信息，请参阅https://github.com/incuna/angular-bind-html-compile。

Answer 3

当数据从服务器加载然后它将给出响应您必须需要一个$ Http服务器并使用get（或）$ http（）方法加载时间。它将通过服务器运行。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("Your File Name.htm")
.then(function(response) {
    $scope.myWelcome = response.data;
});
});

如何在包含的HTML文件中添加AngularJS？

3 个答案: