次のウィジェット属性のカスタム ディレクティブを作成しました。
<div widget></div>
基本的に、ディレクティブはいくつかのテンプレート コードを作成し、html をウィジェット タグ内に配置するだけです。ディレクティブは次のとおりです。
skdApp.directive("widget", function() {
return {
restrict: 'A',
template: htmlTemplate,
link: function($scope, element, attri) {
/*
* setup event handler and twitter bootstrap components here
*/
}
}
htmlTemplate は、カスタム ディレクティブ (<seal>タグなど)も使用する基本的な html コードです。
var htmlTemplate = '<div ng-controller="OfferCtrl">' +
'<div class="container">' +
<seal></seal>' +
'...'+
'</div>' +
'</div>';
私のコントローラーでは、最初に <div widget> に表示するデータを要求します。サーバーからデータを要求するためのすべてのロジックをカプセル化する「オファー」サービスがあります。私が使用しているメソッドは、Offer.query() と呼ばれます。
skdApp.controller('OfferCtrl', function OfferCtrl ($scope, Offer) {
var o = Offer.query({id: 1}, function (response) {
$scope.offer = response;
});
});
応答ハンドラーで、結果をスコープにバインドしています。私が今直面している問題は、ディレクティブもデータを要求しますが、この要求は Offer.query() から受信したデータに依存することです。つまり、Offer.query() からの応答は ID (myID と呼びましょう) を返します。これは、seal ディレクティブがさらにデータを要求するために必要です。したがって、すべてのロジックをコールバックの Offer.query コールバック関数に入れるだけです。これは最善の方法ではないようです。
そこで、この部分を<seal>ディレクティブのリンク機能に移動することを考えていました:
skdApp.directive("seal", function() {
var sealHTML = '<div>{{offer.data.foobar}}</div>';
return {
restrict: 'E',
template: sealHTML,
link: function($scope, element, attrs) {
$scope.$watch('offer.myId', function (newValue, oldValue) {
if (typeof newValue !== "undefined") {
/* request more data with myId
* and bind the result to offer.data
*/
}
});
}
});
このアプローチは「角度」に準拠していますか、それとも角度でこれを行うための(構造に関して)他のより良い方法はありますか?