可以'不要让Angular应用程序在MVC布局中工作

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

本文关键字：应用程序 MVC 布局 工作 Angular 可以      更新时间：2023-09-26

我有一个MVC站点，它使用了一个布局，在布局页面中，我使用了一个Angular应用程序、模型和控制器，一切都像它应该的那样工作，在我的一个页面中（显示在布局中），我想使用另一个AngularApp&控制器具有一些非常基本的功能，您可以在这里看到主要思想：例如Plunker。

更多信息：

  • 我参考布局<head>标签：中的两个.js文件

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

  • 在我的布局页面中，使用第一个应用程序的所有代码都位于两个<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}}

我的代码出了什么问题？

在我的一个页面（显示在布局中）中，我想使用另一个Angular App&控制器

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

相关文章：