如何将数据库中的 html 标签注入到我的指令模板中，实际上是动态定义模板的根元素/标签？答案

【问题标题】：How to inject an html tag from database into my directive's template, in effect dynamically defining the root element/tag of the template?如何将数据库中的 html 标签注入到我的指令模板中，实际上是动态定义模板的根元素/标签？
【发布时间】：2013-09-11 03:36:57
【问题描述】：

我想用数据库中的数据动态构建一个模板（在我的例子中是 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，不能使用文字代替（在最终版本中，这个标签可以是任何东西）。

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

【问题讨论】：

标签： javascript angularjs firebase angularfire angular-ui-router

【解决方案1】：

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

.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);
        });
      }
    }
  }
}

【讨论】：