如何使用 ng-include 和使用 Angular js 的 asp.net MVC 动态添加页面答案

【问题标题】：how to dynamically add page using ng-include with asp.net MVC using angular js如何使用 ng-include 和使用 Angular js 的 asp.net MVC 动态添加页面
【发布时间】：2016-04-15 12:29:07
【问题描述】：

在这里，我尝试使用 Angular js 从控制器调用部分视图。

这是我的代码

<div ng-repeat='t in tabs'>
<div ng-include='t.templateUrl'></div>
<div>

当我尝试包含 ng-include="'/home/menutemplate'" 之类的内容时，它将包含内容。我怎样才能动态地做到这一点？ .帮帮我

【问题讨论】：

标签： angularjs asp.net-mvc angularjs-ng-include

【解决方案1】：

t.templateUrl 应该是有效的范围变量并且应该包含一个字符串（模板的路径）：

$scope.t.templateUrl = "/home/menutemplate"

在你的模板中：

<div ng-include="t.templateUrl"></div>

【讨论】：

【解决方案2】：

这和你在这个例子中所做的完全一样

      angular.module("app", []);

        angular.module("app").controller("ctrl", function ($scope, $rootScope, $filter) {
   
            $scope.templates = [
                {url: "/Application/Partials/home.html"},
                {url: "/Application/Partials/page2.html"}
            ]

        });

<!doctype html>
<html ng-app="app" ng-controller="ctrl">
<head>

</head>
<body>
    <div class="container">

        <div ng-repeat="temp in templates">
            <div ng-include="temp.url"></div>
        </div>


        <script type="text/ng-template" id="/Application/Partials/home.html">
            <h1>home.html is here</h1>
        </script>
        
        <script type="text/ng-template" id="/Application/Partials/page2.html">
            page 2 is here
        </script>

    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</body>
</html>

【讨论】：