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

Dynamically add content in Angular with ajax

本文关键字：添加 动态 ajax Angular 使用      更新时间：2023-09-26

我在一个基于 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>

应用.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>

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

.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>

为了使其正常工作，您必须做两件事：

1 - 使用 Angular HTTP 和 .then 作为callback - 

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

2-使用角度data-binding将数据链接到视图，例如 - 2 向数据绑定。

相关文章：