如何使用 $http 加载页面并在 angularjs 中发布数据答案

【问题标题】：How use $http for loaded page and post data in angularjs如何使用 $http 加载页面并在 angularjs 中发布数据
【发布时间】：2018-01-01 06:06:30
【问题描述】：

我有一个选择框，每当用户选择一个目的地时，我都会在该选择框中加载一个类名为“airlinename”的新页面

当我的函数运行时，我会加载该页面，但它显示的是 innerhtml 而不是显示我在该页面中加载的 angularjs。

如何加载页面和发布数据？

这是我的第一页代码：

<body  ng-app="myApp" ng-controller="myCtrl" ng-init='rcity=[{ "name" : "Moscow", "id" : 1182348.0 }, { "name" : "tehran", "id" : 1203548.0 }, { "name" : "Singapore", "id" : 1188510.0 }, { "name" : "shiraz", "id" : 1211086.0 }, { "name" : "Baku", "id" : 1168993.0 }];airline=[{ "title" : "Azerbaijan Airlines" }, { "title" : "Emirates Airlines" }, { "title" : "Mahan Air" }, { "title" : "Qatar Airways" }, { "title" : "Iran Air" }, { "title" : "Turkish Airlines" }]'>
<form action="/" method="post" class="form_send">
<div>
  <table>
    <tr>
      <td><dl class="dropdown dropdown11 left_dromdown cityname marg5">
          <dt> <a href="javascript:void(0)" onclick="slidedropdown(this)"> <span class="hida">Destination</span> </a> </dt>
          <dd>
            <ul style="display: none;" class="RouteDate routedatesearch">
              <li>
                <_input type="text" ng-model="search1" />
              </li>
              <li 
             onClick="routesearchendcity(this);" 
             class="routecode_list" 
             ng-repeat="x in rcity | filter : search1" 
             data-id="{{x.id}}" ng-click="myFunction()">{{x.name}}</li>
            </ul>
          </dd>
        </dl>
        <span class="airlinename">
        <dl class="dropdown dropdown11 left_dromdown  marg5">
          <dt> <a href="javascript:void(0)" onclick="slidedropdown(this)"> <span class="hida">airline</span> </a> </dt>
          <dd>
            <ul style="display: none;" class="RouteDate routedatesearch">
              <li >
                <_input type="text" ng-model="search2" />
              </li>
              <li 
             onClick="routesearchairline(this)" 
             class="routecode_list" 
             ng-repeat="x in airline | filter : search2">{{x.title}}</li>
            </ul>
          </dd>
        </dl></span></td>
    </tr>
  </table>
  <div class="clr"></div>
</div>
</form_>
<div class="PostCityId">
  <input type="hidden" value="1182348" class="EndCityID">
</div></body>

请说明为什么successCallback 函数不起作用。

这是我的功能：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $scope.cfdump = "";
    $scope.myFunction = function() {
    var request=$http({
       method: 'post',
       url: '/test-js.bc',
     }).then(function successCallback(response) {
             $(".airlinename").empty().html($compile(response)($scope));
                 },
                 function errorCallback(response) {});
    }
});

【问题讨论】：

@Hadis我正在尝试运行你的代码并找出问题所在，你能提供滑动下拉功能吗？
如果可能的话，也可以将 api 调用函数修改为类似 $scope.myFunction = function(){ return $http.post('/test-js.bc').then(function(success ) { console.log(success.data); $(y).closest("tr").find(".airlinename").empty().html(response); }).catch(function (error) {控制台日志（错误）；}）； } 检查控制台日志是否进入 then 或 catch
成功无法正常工作！航空公司名称为空但html（响应）不起作用！如何编译加载html第二页的代码？？
函数$compile在哪里定义？
@Hadis 这不是正确的方法，当您以角度修改 DOM 时，您应该使用指令（jQuery 部分正在修改 DOM）如果您没有，请阅读此内容已经stackoverflow.com/questions/14994391/…

标签： javascript jquery html angularjs http

【解决方案1】：

去掉表单上的动作，当表单提交按钮被点击或输入被点击时，使用 ng-submit 触发控制器中的一个函数（存在提交按钮并且表单聚焦），然后你可以使用 @ 987654321@ 将数据作为常规发布请求发送到服务器。

为了将 HTML 放入视图并进行编译，您需要一个指令...我不认为任何已构建的都可以做到这一点（ng-include 很接近，但希望 URL 可以从中加载“模板” ）。将包含一个自定义指令，该指令执行的操作与您在下面需要修改的内容接近。

angular.module('myApp', [])
  .controller('MyCtrl', function() {
    this.model = {
      htmlLoaded: '<strong>{{foo}}</strong>'
    }
  })
  .directive('compileHtml', function($compile, $rootScope) {
    return {
      restrict:'A',
      scope: {'compileHtml':'='},
      link: function(scope, iElem, iAttr) {
        var newScope = $rootScope.$new();
        newScope.foo = 'bar';
        scope.$watch('compileHtml', function() {
          iElem.html(scope.compileHtml);
          $compile(iElem.contents())(newScope);
        });
      }
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js"></script>


<div ng-app="myApp" ng-controller="MyCtrl as myctrl">
  {{myctrl.model|json}}
  <div compile-html="myctrl.model.htmlLoaded"></div>
</div>

【讨论】：