0

データベース (私の場合は Firebase/angularFire) からのデータを使用してテンプレートを動的に構築したいと考えています。テンプレートが構築される方法は、angularFire で取得された各オブジェクト内のタグ プロパティによって異なります。私の最初のアプローチ：

var imgTemplate = function(tag){
  return '<'+tag.tag+' class="{{ tag.classes }}" src="{{ tag.content }}" alt="{{ tag.alt }}">';
};
var txtTemplate = function(tag){
  return '<'+tag.tag+' class="{{ tag.classes }}">{{ tag.content }}</'+tag.tag+'>';
};

これはほとんど機能しますが、tag.tag は実際のタグの代わりに定義されていません。これは、これらの関数を使用するコンパイル関数が angularFire がデータをフェッチしてバインドする前に実行されるためです。これが私の2番目のアプローチです：

var imgTemplate = function(tag){
  return '<{{tag.tag}} class="{{ tag.classes }}" src="{{ tag.content }}" alt="{{ tag.alt }}">';
};
var txtTemplate = function(tag){
  return '<{{ tag.tag }} class="{{ tag.classes }}">{{ tag.content }}</{{ tag.tag }}>';
};

ただし、これは txtTemplate のリテラル文字列の一部のみを繰り返しレンダリングします。

<{{ tag.tag }} class="{{ tag.classes }}">{{ tag.content }}

実際のhtmlの代わりにng-repeatで繰り返されるすべての「タグ」要素に対して。

これは私のディレクティブのコンパイル機能です:

  compile: function(templateElem, directiveAttrs){
    var tag = directiveAttrs.tag;
    if(tag.tag === 'img'){
      var img = angular.element(imgTemplate(tag));
      templateElem.replaceWith(img);
    }else{
      var txt = angular.element(txtTemplate(tag));
      templateElem.replaceWith(txt);
    }
  },

angular.ui.router の状態のコントローラーで Firebase からデータが取得されます。

.state("siteNav.sideNav.content", {
  url: '/:lang/:view/:contentID/:index',
  views:{
    '@': {
      templateUrl: '/views/content.html',
      controller: function($scope, angularFire){
        var stateParams = $scope.$stateParams;
        console.log(stateParams.lang);
        var url = 'https://example.firebaseio.com/'+stateParams.lang+'/content/'+stateParams.view+'/'+stateParams.contentID;
        angularFire(new Firebase(url), $scope, 'tags');
      }
    }
  }
}

テンプレート content.html は次のようになります。

<div ng-repeat="tag in tags">
  <acms-view tag="tag"></acms-view>
</div>
  • angularFire が提供する 3 方向バインディングが必要です。
  • タグは firebase から取得する必要があり、代わりにリテラルを使用することはできません (最終バージョンでは、このタグは実際には何でもかまいません)。

コンパイル関数が比較/値の割り当てに使用する前に、「タグ」プロパティが設定されるようにするにはどうすればよいですか?
取得したデータをバインドするスコープがないため、コンパイル関数内で angularFire サービスを使用できません。
何らかの理由で angularFire はリンク関数内では機能しませんが、たとえ機能していたとしても、テンプレートを作成する必要があるため、あまり役に立たないと思います。
angularFire の代わりにコンパイル関数内で Firebase の js API を使用する必要がありますか?
もしそうなら、AngularFire が提供する 3 ウェイ バインディングを機能させるにはどうすればよいですか?
お時間をいただきありがとうござい
ます

4

1 に答える 1

0

データを取得したときにデータを返す promise になるように$q設定することで、 promise を作成できます。例えば：$scope.tagsangularFire

.state("siteNav.sideNav.content", {
  url: '/:lang/:view/:contentID/:index',
  views:{
    '@': {
      templateUrl: '/views/content.html',
      controller: function($scope, $q, angularFire){
        var stateParams = $scope.$stateParams;
        var url = 'https://example.firebaseio.com/'+stateParams.lang+'/conten /'+stateParams.view+'/'+stateParams.contentID;
        var deferred = $q.defer();
        $scope.tags = deferred.promise;
        angularFire(new Firebase(url), $scope, 'rawTags').then(function() {
          deferred.resolve($scope.rawTags);
        });
      }
    }
  }
}
于 2013-09-11T23:12:37.777 に答える