AngularJS not working with MVC Partial Views

Question

I am having a strange problem. I am using AngularJS in my project. I have some partial views where I am having different implementations of AngularJS functionality. I am loading all my partial views via Ajax call. Ajax call does load partial view in container but its AngularJS functionality does not work. I have noticed that when I give reference to AngularJS via CDN then it works but when I copy and paste CDN JS into my local js file then it does not.

Please suggest what is the issue.

Here is the code:

Partial View:

<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>

Controller:

public PartialViewResult LoadViews(int id)
{
    if (id == 1)
        return PartialView("TestView1Partial");
    else 
        return PartialView("TestView2Partial");
}

Main View:

<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>

Thanks, JSHunjan

So the problem is that Angularjs doesn't work when you change from using the CDN to using a local version of your file? — Tim B James
– Tim B James, Commented Aug 19, 2013 at 12:31
How are you importing your angular.js local file? You wrote a big question for a simple question. — Deividi Cavarzan
– Deividi Cavarzan, Commented Aug 19, 2013 at 12:36
Your path to the angularjs file is wrong. Please post the path that you are using. — Tim B James
– Tim B James, Commented Aug 19, 2013 at 12:44
@DeividiCavarzan I am using JS file by dragging and dropping from scripts folder to the view. I dont think visual studio will create wrong path. Please correct me if I am wrong. — JSHunjan
– JSHunjan, Commented Aug 19, 2013 at 13:29

chopper · Accepted Answer · 2014-10-14 01:06:51Z

0

In your Ajax call change the async:false and it might work.

edited Oct 14, 2014 at 1:06

chopper

6,7397 gold badges40 silver badges56 bronze badges

answered Oct 13, 2014 at 21:52

Abhi Kumar

1

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS not working with MVC Partial Views

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related