Question

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

我使用jQuery和AngularJS在div中加载部分视图如下：

我正在使用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本身的一部分提供。

Answer 2

以Angular方式执行此操作。您应该在控制器范围内声明expression。

HTML：

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

在你的then回调中，用以下代码替换jQuery代码：

$scope.courseData = obj.data;

还在courseData方法之前设置$scope.GetCourseList的初始状态。

$scope.courseData = "";

Answer 3

<div id="courseList" ng-bind-html="courseListHtml"></div>

在你的控制器中：

$http(...).then(function (obj) {
    $scope.courseListHtml = $sce.trustAsHtml(obj.data);
});

在asp.net MVC应用程序中使用AngularJS加载局部视图

3 个答案: