如何将数据库中的 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 注入 指令      更新时间：2023-09-26

我想用数据库中的数据动态构建一个模板（在我的例子中是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获取和绑定数据之前运行。这是我的第二种方法：

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

模板内容.html如下所示：

<div ng-repeat="tag in tags">
  <acms-view tag="tag"></acms-view>
</div>
  • 我确实需要 angularFire 提供的三向绑定。
  • 标签必须来自 firebase，不能使用文字代替（在最终版本中，这个标签可以是任何东西）。

如何确保在编译函数将其用于比较/值分配之前填充"tag"属性？
不能在编译函数中使用 angularFire 服务，因为没有将获取的数据绑定到的范围。
由于某种原因，angularFire 在链接功能中不起作用，尽管即使是这样，我认为它也不会有太大帮助，因为我仍然需要构建模板。
我应该在编译函数中使用Firebase的js api而不是angularFire吗？
如果是这样，我将如何使 angularFire 提供的三向绑定工作？
谢谢你的时间
杰瑞德

您可以使用

$q创建承诺，并将$scope.tags设置为承诺，该承诺将在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);
        });
      }
    }
  }
}
相关文章：