jquery - 在 asp.net MVC 应用程序中使用 AngularJS 加载部分 View

Question

我正在创建一个 ASP.net MVC 应用程序。

我正在使用 jQuery 和 AngularJS 在 div 中加载部分 View ，如下所示:

我正在使用 AngularJS 进行 ajax 调用，并使用 jQuery 将结果存储为 div“courseList”中的内容。当用户点击链接时就会发生这种情况。

  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>

上面的代码工作正常。但我使用 jQuery 来填充 <div ID="courseList"> 。

如何使用 AngularJS 而不使用 jQuery 来实现此目的？

Answer 1

您可以替换对 jQuery $ Dollar 的调用，例如

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

Angular 的等效项是 angular.element

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

但在幕后，Angular 将使用 jQuery(如果可用)，即您在 <script> 中包含了 jQuery 的一个版本。标记某处。否则 Angular 将使用 jqLite ，它作为 Angular 本身的一部分在内部可用。