无法让 Angular 应用程序在 MVC 布局中工作

Question

我有一个使用布局的 MVC 站点，在布局页面中，我使用了一个 Angular 应用程序、模型和控制器，并且一切正常，在我的一个页面（显示在布局内部）中，我想使用另一个 Angular 应用程序 &具有一些非常基本功能的控制器，您可以在这里看到主要思想： Plunker for example.

更多信息：

我在布局 <head> 标签中引用了两个 .js 文件：

<script src="~/Scripts/AdminVM.js"></script>
<script src="~/Scripts/ShopVM.js"></script>

我布局页面中使用第一个 App 的所有代码都在两个 <div> 标签之间，第一个带有 ng-app = "FirstApp"，第二个带有 ng-controller = "FirstController"。
我都试过了：
1. 将带有 ng-app = "SecondApp" 和 ng-controller = "SecondController" 的两个 <div> 标签放入我的 .cshtml 文件中，并在两者之间输入我的代码。
2. 将两个 <div> 标签放在我的布局页面的正文中，并在它们之间放置 @RenderBody() 标签。

我不知道我在这里做错了什么，即使是最简单的事情也不起作用：

ShopVM.js

var app = angular.module("ShopApp", []);
app.controller("ShopViewModel", function ($scope, $http) {
    $scope.test = "Test123";
});

Shop.cshtml（不是布局文件）

<div ng-app="ShopApp">
    <div ng-controller="ShopViewModel">
        <ul class="nav nav-tabs nav-justified">
            <li role="presentation" class="active"><a href="#">Home</a></li>
            <li role="presentation"><a href="#">Cat1</a></li>
            <li role="presentation"><a href="#">Cat2</a></li>
        </ul>
        <div>{{test}}</div>

        <input id="Text1" type="text" ng-model="Shop.Test"/>

    </div>
</div>

我看到的是一个简单的测试：{{test}}

我的代码有什么问题？

Answer 1

in one of my pages (that is shown inside the layout) i want to use another Angular App & Controller

angular 不支持嵌套应用程序（因为您在布局页面中包含第一个应用程序，第二个应用程序嵌套在第一个应用程序中）

无法让 Angular 应用程序在 MVC 布局中工作

Can't get an Angular App to work inside a MVC Layout

javascript

asp.net

asp.net-mvc

asp.net-mvc-3

angularjs