I have a strange problem. I am using AngularJS in my project. I have some partial views where I have different implementations of AngularJS functions. I load all my partial views through an Ajax call. Ajax call loads a partial view in the container, but its AngularJS function does not work. I noticed that when I give a link to AngularJS via CDN, it works, but when I copy and paste the JS CDN into my local js file, it is not.
Please indicate the problem.
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"); }
The 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
source share