Angular.js ajax和应用程序不起作用

Angular.js ajax and apply not working

本文关键字：应用程序 不起作用 ajax js Angular      更新时间：2023-09-26

我正在尝试使用angular.js进行第一次尝试，但我在恢复网站的正确内容时遇到了问题。页面的内容是通过AJAX接收的（现在来自静态数据，后者来自数据库）。当我在id="content"的元素内放置一个指令为ng repeat的块时，一切都正常。结果是：

ID:1名称：苹果ID:2名称：Microsoft

但是，如果我使用javascript和AJAX动态地将元素放入内容中，我就无法显示正确的数据。结果是：

ID:{｛firm.ID｝｝名称：｛｛firm.Name｝}

我试着使用setTimeout（）进行后续调用$apply（），但无济于事。我试图在网上找到一个解决方案，但找不到类似的例子。有人知道问题出在哪里吗？非常感谢你的帮助。

Html代码：

<div ng-app="myApp">
  <div id="main_controler" ng-controller="mainController">
    <button onclick="get_page('1')">Page one</button>
    <button onclick="get_page('2')">Page two</button><br /><br /><br />
    <div id="content">
      <div ng-repeat="firm in data.firms"  style="width:100%">
        ID: {{firm.id}} Name: {{firm.name}}
      </div>
    </div>
  </div> 
</div>

JavaScript代码：

var app = angular.module('myApp', []);
app.controller('mainController', function($scope, $http) {
  $scope.get = function(a_number) {
    var p_url = 'ajax_fce.php?num=' + a_number;
    $http({
      method: 'JSON',
      url: p_url
    }).success(function(data, status) {
       $scope.data = data;
    }).error(function(data, status) {
      alert('Error');
    });
  }
  $scope.get(1);
});

get_template_1 = function() { 
  return '<div ng-repeat="firm in data.firms"  style="width:100%">'+
           'ID: {{firm.id}} Name: {{firm.name}}'+
         '</div> ';
}
get_template_2 = function() { 
  return '<div ng-repeat="person in data.persons"  style="width:100%">'+
           'Name: {{person.name}} Surname: {{person.surname}}'+
         '</div> ';
}
load_template = function(page_id) {
  var p_template =  '';
  if(page_id == 1) { p_template =  get_template_1(); }
  if(page_id == 2) { p_template =  get_template_2(); }
  return p_template;
}

get_page = function(page_id) {
  $('#content').html(load_template(page_id));
  angular.element(document.getElementById('main_controler')).scope().get(page_id);
  angular.element(document.getElementById('main_controler')).scope().$apply();
}

PHP代码（AJAX）:

$p_return =  ''; 
if ($_GET['num'] == '1') {
   $p_return = '   { "firms": [ { "id": "1", "name": "Apple" },
                    { "id": "2", "name": "Microsoft" } ]}'; }    
 else if ($_GET['num'] == '2') {
   $p_return = '   { "persons": [ { "name": "Steve", "surname": "Jobs" },
                    { "name": "Bill", "surname": "Gates" } ]}';
}
echo $p_return;
这是因为get_page函数不编译模板。（对我来说）最简单的方法是：HTML代码： 
<div ng-app="myApp">
  <div id="main_controler" ng-controller="mainController">
    <button ng-click="get(1)">Page one</button>
    <button ng-click="get(2)">Page two</button><br /><br /><br />
    <div id="content">
      <div ng-show="number==1" ng-repeat="firm in data.firms"  style="width:100%">
        ID: {{firm.id}} Name: {{firm.name}}
      </div>
      <div ng-show="number==2" ng-repeat="person in data.persons"  style="width:100%">
           Name: {{person.name}} Surname: {{person.surname}}
      </div>
    </div>
  </div> 
</div>

javascript代码：

var app = angular.module('myApp', []);
app.controller('mainController', function($scope, $http) {
  $scope.number = 0;
  $scope.get = function(a_number) {
    $scope.number = a_number;
    var p_url = 'ajax_fce.php?num=' + a_number;
    $http({
      method: 'JSON',
      url: p_url
    }).success(function(data, status) {
       $scope.data = data;
    }).error(function(data, status) {
      alert('Error');
    });
  }
  $scope.get(1);
});

第一个答案有一个小缺点。用于公司和个人上市的Html代码保留在原始Html中。最初的意图是将它动态地插入其中。我终于在找到了解决方案

从数据库编译动态HTML字符串

我为我的案子执行它。我只把html的模板从javascript移到了服务器上。服务器现在通过Ajax提供html。

这就是我以前需要的，现在看起来是这样的：

Html代码：

<body ng-app="app">
  <h1>Compile dynamic HTML</h1>
  <div ng-controller="MyController">
    <button ng-click="get(1)">Page one</button>
    <button ng-click="get(2)">Page two</button><br /><br /><br />
  <!--      <textarea ng-model="html"></textarea>  -->
    <div dynamic="html"></div>
  </div>
</body>

Javascript代码：

var app = angular.module('app', []);
app.directive('dynamic', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});
app.controller('MyController', function($scope, $http) {
  $scope.get = function(a_number) {
    var p_url = 'ajax_fce.php?num=' + a_number;
    $http({
      method: 'JSON',
      url: p_url
    }).success(function(data, status) {
       $scope.html = data.template;
       $scope.data = data.data;
    }).error(function(data, status) {
      alert('Error');
    });
  }
  $scope.get(1);
});

PHP代码：

echo '{"template": "'.get_template($_GET['num']).'", '.
      '"data": '.(get_data($_GET['num'])).'}';  
function get_data($a_template) {
  if ($_GET['num'] == '1') {
    $p_result = '{ "firms": [ { "id": "1", "name": "Apple" },
                    { "id": "2", "name": "Microsoft" } ]}';
  } else if ($_GET['num'] == '2') {
    $p_result = '   { "persons": [ { "name": "Steve", "surname": "Jobs" },
                    { "name": "Bill", "surname": "Gates" } ]}';
  }
  return $p_result;
}
function get_template($a_template) {
  if ($_GET['num'] == '1') {
    $p_result = '<div ng-repeat='"firm in data.firms'"  style='"width:100%'"> ID: '.
                                              '{{firm.id}} Name: {{firm.name}}</div>';
  } else if ($_GET['num'] == '2') {
    $p_result =  '<div ng-repeat='"person in data.persons'"  style='"width:100%'"> Name: '.
                                 '{{person.name}} Surname: {{person.surname}}</div>';
  }
  return $p_result;
}

我回答了我自己的问题，但我希望这个例子能帮助别人，为他节省一些时间。

相关文章：