0

我想用数据库中的数据动态构建一个模板（在我的例子中是 Firebase/angularFire）。模板的构建方式取决于使用 angularFire 检索的每个对象中的 tag 属性。我的第一种方法：

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 获取和绑定数据之前运行。这是我的第二种方法：

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

对于使用 ng-repeat 而不是实际的 html 迭代的每个“标签”元素。

这是我的指令的编译功能：

  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 提供的三向绑定。
  • 标签必须来自 firebase，不能使用文字代替（在最终版本中，这个标签可以是任何东西）。

如何确保在编译函数使用它进行比较/赋值之前填充“标签”属性？
无法在编译函数中使用 angularFire 服务，因为没有将获取的数据绑定到的范围。
由于某种原因，angularFire 在链接函数中不起作用，即使它是，我认为它不会有太大帮助，因为我仍然需要构建模板。
我应该在编译函数中使用 Firebase 的 js api 而不是 angularFire？
如果是这样，我将如何使 angularFire 提供的三种方式绑定工作？
谢谢你的时间
杰瑞德

4

1 回答 1

0

您可以使用$q并设置一个 Promise 创建一个 Promise $scope.tags，该 Promise 将在获取数据时返回数据angularFire。例如：

.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 回答