📌  相关文章
📜  如何从AngularJS控制器中将HTML插入视图中？(1)

📅  最后修改于: 2023-12-03 15:08:14.897000             🧑  作者: Mango

如何从AngularJS控制器中将HTML插入视图中？

在AngularJS中，可以通过控制器中的$scope对象来将HTML插入到视图中。

使用ng-bind-html指令

我们可以使用ng-bind-html指令来将HTML添加到视图中。该指令需要ngSanitize模块的支持。

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <meta charset="utf-8">
    <title>AngularJS ng-bind-html</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-sanitize.js"></script>

    <script>
        var app = angular.module('myApp', ['ngSanitize']);

        app.controller('myCtrl', function ($scope) {
            $scope.myHTML = '<h1>Welcome to AngularJS</h1>';
        });
    </script>
</head>

<body ng-controller="myCtrl">
    <div ng-bind-html="myHTML"></div>
</body>

</html>
使用ng-include指令

我们还可以使用ng-include指令从外部HTML文件中加载内容。以下是示例代码：

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <meta charset="utf-8">
    <title>AngularJS ng-include</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.js"></script>

    <script>
        var app = angular.module('myApp', []);

        app.controller('myCtrl', function ($scope) {
            $scope.tpl = 'tpl/welcome.html';
        });
    </script>
</head>

<body ng-controller="myCtrl">
    <div ng-include="tpl"></div>
</body>

</html>
结论

通过上述两种方法，我们可以很容易地从AngularJS控制器中将HTML插入到视图中，实现动态内容生成和展示。

以上是本人的一些理解，不足之处请各位大佬多多指教。