2013-04-21 14 views
3

我與angularjs玩耍,並具有以下HTML: -

<div ng-app="App"> 
     <div ng-controller="AppCtrl"> 
     <products></products> 
     </div> 
    </div> 

和我的JS是這樣的: -

var app = angular.module('App', []); 

app.controller("AppCtrl", function($scope, $http) { 
    $http.get('/api/products') 
     .then(function(res) { 
     $scope.products = res.data; 
    }); 
}); 

app.directive("products", function() { 
    return { 
     restrict: "E", 
     template: "<h1>Products</h1><ul><li ng-repeat='product in products'>{{product.Name}} - <em>{{product.Category}}</em></li></ul>", 
    }; 
}); 

這工作得很好,但我不確定指令如何知道控制器在模板呈現結果之前已經加載了數據。所以我的問題是: -

是在這種情況下使用$http.get的推薦方式(解釋會很好),或者如果不是,那麼推薦的方法是什麼?

+0

所以,這是工作的罰款,但你想知道爲什麼/它是如何工作的? – exclsr 2013-04-21 18:55:42

+0

是的,不!如果這是推薦的方式,那麼我可以假設框架只是做了一些魔術,如果不是那麼推薦的方式。 – Rippo 2013-04-21 18:57:27

+0

我認爲你在擔心錯誤的事情。當你需要數據時,你應該使用$ http.get,而不用擔心模板(如果有效的話)。如果模板不起作用,那麼應該查看angularjs如何使用$ apply()來傳播模型中的更改。 – 2013-04-21 19:09:11

回答

2

我認爲這是$http.get的好用處。在一天結束時,它只是一個做Ajax請求的工具。

看來你的問題源於恐懼,你的指令會在不同的場景中神祕地突破,這是可以理解的。那麼關鍵是要了解數據綁定是Angular的祕密武器。

想一想,Angular編譯一切並將其引入事件/摘要循環。因此,它可以檢測依賴關係,監視變量的變化,並在這些變量發生變化時調用依賴方法(例如您的產品指令)。

的角度引導不提供進一步的瞭解概念圖的一個偉大的工作,這是在這裏:http://docs.angularjs.org/guide/concepts

+1

很好的解釋我想我已經習慣了一個世界,我有一個回調函數後,數據已成功檢索。它可以檢測和連接'$ http.get'依賴的事實從來沒有發生過。 – Rippo 2013-04-21 19:30:24

相關問題