Question

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

ID：1姓名：Apple 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;

Answer 1

这是因为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);
});

Answer 2

第一个答案有一个小缺点。公司和个人列表的Html代码仍保留在原始html中。最初的目的是动态插入它。我终于找到了一个解决方案：

Compiling dynamic HTML strings from database

我为我的情况实施它。我只将html的模板从javascript移动到服务器。 Server现在通过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;
}

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

Angular.js ajax并申请不工作

2 个答案: