Javascript Angular.js ajax和apply不起作用_Javascript_Ajax_Angularjs

Javascript Angular.js ajax和apply不起作用

javascript ajax angularjs

Javascript Angular.js ajax和apply不起作用,javascript,ajax,angularjs,Javascript,Ajax,Angularjs,我正在尝试使用angular.js进行我的第一次尝试，但我在恢复网站的正确内容方面遇到了问题。页面内容通过AJAX接收（现在来自静态数据，后者来自数据库）。当我放置一个带有指令ng repeat IN element且id=“content”的块时，一切正常。结果是： ID:1名称：苹果 ID:2名称：Microsoft 但是如果我使用javascript和AJAX动态地将元素放入内容中，我就无法显示正确的数据。结果是： ID:{{firm.ID}}名称：{{firm.Name}} 我尝试在后续

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

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

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

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

我尝试在后续调用$apply（）时使用setTimeout（），但没有帮助。我试图在网上找到解决方案，但找不到类似的例子。有人知道哪里会出问题吗？非常感谢你的帮助

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>

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

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

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

我为我的案件实施它。我只将html模板从javascript移动到服务器。服务器现在通过Ajax提供html

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

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>

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

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;
}

echo'{“template”：“.get_template（$\u get['num']）。”，”。
““数据”：”。（获取数据（$\u获取['num']）。。}”；
函数get_data（$a_模板）{
如果（$\u GET['num']=='1'）{
$p_result='{“公司”：[{“id”：“1”，“名称”：“苹果”}，
{“id”：“2”，“名称”：“Microsoft”}]}'；
}如果（$\u GET['num']=='2'）{
$p_result='{“个人”：[{“姓名”：“史蒂夫”，“姓氏”：“乔布斯”}，
{“姓名”：“比尔”，“姓氏”：“盖茨”}]}；
}
返回$p_结果；
}
函数get_template（$a_template）{
如果（$\u GET['num']=='1'）{
$p_result='ID:'。
{{firm.id}}名称：{{firm.Name}}；
}如果（$\u GET['num']=='2'）{
$p_result='Name:'。
{{人.名}姓：{{人.姓}}；
}
返回$p_结果；
}

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

使用模板的方法不利于正确使用angular，并且代码中不应该有任何原生的

onclick

inline。需要花更多时间学习角度教程。从docs站点中的一个开始。您的许多代码永远不需要在angular appPlus中使用。将

onClick

更改为

ng click

对于新手来说显然是一个微妙的区别，但使用

ng click

是至关重要的。它将您所有的代码都保存在angular框架内，这样您就不必手动调用

$apply

。非常感谢。我使用了你的代码，一切正常。你帮了我很大的忙。再次感谢。

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);
});

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;
}