使用 ajax 在 Angular 中动态添加内容答案

【问题标题】：Dynamically add content in Angular with ajax使用 ajax 在 Angular 中动态添加内容
【发布时间】：2016-03-03 14:19:41
【问题描述】：

我在基于 AngularJS 的网站上有一个页面，其内容通过 ajax 加载到 div 中。我的问题是加载内容和控制器中的 Angular 指令似乎被忽略了。如何让控制器正常工作？

HMTL：

<a href="javascript:void(0)" id="loadContent">Load Content</a>

<div id="myForm-con">
</div>

<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript">
  $('#loadContent').on('click', function() {
    $.post("load-my-form.php", function(data, result) {
      $('#myForm-con').html(data);
    });     
  });
</script>

app.js

(function() {
    var app = angular.module('app', []);

    app.controller('validationCtrl', ['$scope',
        function ($scope) {
            $scope.submitForm = function () {
                $scope.submitted = true;

                if ($scope.myForm.$valid) {
                    alert('form is valid');
                }
            }
        }
    ]);
})();

HTML ajax 加载表单

<div ng-controller="validationCtrl">
  <form id="my-form" name="myForm" ng-submit="submitForm()" novalidate>
    ...
  </form>
</div>

【问题讨论】：

停止在 Angular 应用程序中使用 jQuery AJAX。 Angular 有 $http 模块用于创建请求。

标签： javascript jquery angularjs ajax

【解决方案1】：

我可能会尝试这样的事情：

HTML

<a href="#" id="loadContent" ng-click="loadContent()">Load Content</a>

角度

$scope.loadContent() = $http.post("load-my-form.php", data).then(function (result) {
    $('#myForm-con').html(result);
});

或者

角度

$scope.formResults = '';
$scope.loadContent() = $http.post("load-my-form.php", data).then(function (result) {
    $scope.formResults = result;
});

HTML

<div id="myForm-con">{{formResults}}</div>

【讨论】：

【解决方案2】：

为了让它工作，你必须做两件事：

1 - 使用角度 http 和 .then 作为 callback -

$http.post('/someUrl', data, config).then(successCallback, errorCallback);

2- 使用角度 data-binding 将您的数据链接到视图，例如 - 2-ways data-binding。

【讨论】：