如何使用$ http加载页面并在angularjs

时间:2018-01-01 06:06:31

标签: javascript jquery html angularjs http

我有一个选择框,只要用户选择一个目的地,我就会在该选择框中使用类名"航空公司名称"

在span中加载新页面

当我的函数运行时,我加载了该页面,但它显示了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) {});
    }
});

1 个答案:

答案 0 :(得分:1)

删除表单上的操作使用ng-submit在命中表单提交按钮或输入命令时触发控制器中的某个功能(存在提交按钮且表单集中),然后您可以使用{ {1}}将数据作为常规发布请求发送到服务器。

为了让HTML进入视图并编译,你需要一个指令...我不认为任何构建的那些都是这样的(ng-include是关闭但是期望一个URL加载一个&#34;模板&#34;来自)。将包含一个自定义指令,该指令可以执行与您下面需要的内容相近的修改。

&#13;
&#13;
$http.post
&#13;
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);
        });
      }
    }
  })
&#13;
&#13;
&#13;