up vote 1 down vote favorite
1

I am creating an ASP.net MVC application.

I am loading a partial view in a div using jQuery and AngularJS as following:

I am doing an ajax call using AngularJS and storing the result as the content in div "courseList" using jQuery. This happens when the user clicks on links.

  angular.module('Domain', []).controller('DomainCtrl', function (
    $http, $scope, $window) {
    $scope.GetCourseList = function (domain) {
      $http({
        method: 'GET',
        url: '/Showcase/CourseList',
        params: {
          domain: domain
        }
      }).then(function (obj) {
        $('#courseList').html(obj.data);    //jQuery code to load the content
      });
    };
  });

Html:

<nav ng-app="Domain">
  <h2>Domains</h2>
  <ul ng-controller="DomainCtrl" ng-init="domain=''">
    @foreach (var item in (List<string>)ViewBag.domains)
    {
      <li><a href="#" ng-click="GetCourseList('@item.ToString()')">@item.ToString() </a></li>
    }
  </ul>
</nav>

<div id="courseList">    </div>

The above code works fine. But I am using jQuery to populate the <div ID="courseList">.

How can I achieve this with AngularJS and no jQuery?

share|improve this question
    
obj.data will have the contents of the partial view say <div><table>... this will be inserted into the div courseList – RandomUser Jul 14 '14 at 9:12
up vote 1 down vote accepted

You can replace calls to jQuery $ dollar e.g.

$('#courseList').html(obj.data);

with Angular's equivalent which is angular.element

angular.element('#courseList').html(obj.data);

Under the hood though, Angular will use jQuery if it's available i.e. you are including a version of jQuery in a <script> tag somewhere. Otherwise Angular will use jqLite, which is internally available as part of Angular itself.

share|improve this answer
    
it's working, can you explain a bit about the solution? How it works? – RandomUser Jul 14 '14 at 9:14
1  
Have a read of the documentation for angular.element, which I included the url in my updated answer. That page should explain everything for you. – Jason Evans Jul 14 '14 at 9:15
    
this is off topic but how can I load a popup kind of view inside the current page using AngularJS where I can do a form submit inside the popup window? – RandomUser Jul 14 '14 at 9:17
    
@RandomUser You're much better off asking that as a new question. It's best not to mix two questions on one page. – Jason Evans Jul 14 '14 at 9:19
1  
It's hard to help you with that question without seeing any existing code you have. If you have a popup window, then you need a <form> element in that window to do a submit. Or you could use ajax to POST data back to the server. I can't see why people would downvote that question, it seems reasonable enough. – Jason Evans Jul 14 '14 at 9:25
up vote 1 down vote

To do this in Angular way. You should declare expression in the controller scope.

HTML:

<div id="courseList">{{ courseData }}</div>

And in your then callback, replace jQuery code with this:

$scope.courseData = obj.data;

Also set the initial state of courseData before $scope.GetCourseList method.

$scope.courseData = "";
share|improve this answer
up vote 1 down vote 
<div id="courseList" ng-bind-html="courseListHtml"></div>

And in your controller:

$http(...).then(function (obj) {
    $scope.courseListHtml = $sce.trustAsHtml(obj.data);
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.