AngularJS 不适用于 MVC 局部视图

Posted 2023-05-08

【中文标题】AngularJS 不适用于 MVC 局部视图

【英文标题】：AngularJS not working with MVC Partial Views

【发布时间】：2013-08-21 04:11:15

【问题描述】：

我遇到了一个奇怪的问题。我在我的项目中使用 AngularJS。我有一些部分视图，其中我有 AngularJS 功能的不同实现。我正在通过 Ajax 调用加载我的所有部分视图。 Ajax 调用确实在容器中加载了部分视图，但它的 AngularJS 功能不起作用。我注意到，当我通过 CDN 引用 AngularJS 时，它可以工作，但是当我将 CDN JS 复制并粘贴到我的本地 js 文件中时，它就不行了。

请提出问题所在。

代码如下：

局部视图：

<div ng-controller="EmployeeController">
    <div>
        ID: <input type="text" id="txtID" ng-model="employeeID" /><br />
        Name: <input id="txtName" type="text" ng-model="employeeName" />
        <button id="btnAddEmployee" ng-click="addEmployee()">Add Employee</button>
        <button id="btnRemoveEmployee" ng-click="removeEmployee()">Remove Employee</button>
        <ul >
            <li ng-repeat="employee in employees">
               Employee id is: employee.id<br />
               Employee name is: employee.name
            </li>
        </ul>
    </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

<script>
    var employees = [ name: 'ABC', id: '1' ,
                     name: 'XYZ', id: '2' ,
                     name: 'KKK', id: '3' ];

    function EmployeeController($scope) 
        $scope.employees = employees;
        $scope.addEmployee = function () 
            $scope.employees.push( name: $scope.employeeName, id: $scope.employeeID );
        
        $scope.removeEmployee = function () 
            $scope.employees.pop();
        
    
</script>

控制器：

public PartialViewResult LoadViews(int id)

    if (id == 1)
        return PartialView("TestView1Partial");
    else 
        return PartialView("TestView2Partial");

主视图：

<ul>
    <li>
        <a href="#" onclick="LoadView2()">View 2</a>
    </li>
</ul>

<div id="dvContainer">

<script>
    function LoadView2() 
        $.ajax(
            url: "/home/LoadViews?id=2",
            type: "GET",
            datatype: "html",
            async:true,
            success: function (result) 
                $("#dvContainer").html(result);
            
        );

    
</script>

谢谢， JSHunjan

【问题讨论】：

那么问题是当您从使用 CDN 更改为使用文件的本地版本时，Angularjs 不起作用？

是的，这就是我面临的问题。

你是如何导入你的 angular.js 本地文件的？你为一个简单的问题写了一个大问题。

您的 angularjs 文件路径错误。请发布您正在使用的路径。

@DeividiCavarzan 我通过从脚本文件夹拖放到视图来使用 JS 文件。我不认为视觉工作室会创建错误的路径。如果我错了，请纠正我。

【参考方案1】：

在您的 Ajax 调用中更改 async:false，它可能会起作用。