Angular.js阿賈克斯和申請不工作

我試圖做我的第一次嘗試與angular.js和我有恢復網站的正確內容的問題。頁面內容通過AJAX接收（現在來自靜態數據，後者來自數據庫）。當我使用id =「content」的元素在指令ng-repeat中放置一個塊時，一切正常。結果是：Angular.js阿賈克斯和申請不工作

ID：1名：蘋果 ID：2名：微軟

但如果我把這個元素裏面的內容動態地使用JavaScript和AJAX，我無法顯示正確的數據。結果是：

ID：{{firm.id}}名稱：{{firm.name}}

我試圖使用的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>

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;

來源

2013-12-14 Gery

方法與你的模板不利於使用的角度適當，不應該有任何本地'onclick'在你的代碼內聯。需要花更多的時間與角度教程。從文檔站點開始。很多代碼都不需要用在角度應用程序 – charlietfl

第一個答案有一個小缺點。公司和個人列表的HTML代碼仍保留在原始html中。最初的目的是動態地在那裏插入它。我終於找到了一個解決方案：

Compiling dynamic HTML strings from database

我實現它爲我的情況。我只將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; 
}

我回答我自己的曲但我希望這個例子可以幫助某人併爲他節省一些時間。

來源

2013-12-16 09:01:35 Gery

這是因爲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); 
});

來源

2013-12-15 00:17:51 csbenjamin

Plus plus中。將'onClick'改爲'ng-click'肯定對新手來說是一個微妙的區別，但是使用'ng-click'非常重要。它將你所有的代碼保存在角度框架中，這樣你就不必手動執行'$ apply'調用。 – Hylianpuffball

非常感謝。我用你的代碼，一切正常。你非常幫助我。再次感謝。 – Gery

Angular.js阿賈克斯和申請不工作

回答

相關問題