Question

我最近编写了此函数，该函数将带有Vue.js指令的HTML转换为常规HTML：

function vueToHTML(vueHTML, data, onRender) {
  function onUpdated() {
    this.$nextTick(function () {
      onRender(this.$el.innerHTML);
    });
  }

  return new Vue({
    template: '<div>' + vueHTML + '</div>',
    el: document.createElement('div'),
    data: Object(data),
    mounted: onUpdated,
    updated: onUpdated
  });
}

因此，我可以通过执行以下操作来调用此函数：

vueToHTML(
  '<div v-for="a in [1,2,3]">{{a}}</div>',
  null,
  function(output) {
    console.log('Output:', output);
  }
);

将输出以下内容：

Output: <div>1</div><div>2</div><div>3</div>

我还可以指定数据（AKA范围）变量：

vueToHTML(
  '<div v-for="a in arr">{{a}}</div>',
  { arr: [9,8,7,6,5,4,3,2,1] },
  function (output) {
    console.log('Output:', output);
  }
);

这将导致以下结果：

Output: <div>9</div><div>8</div><div>7</div><div>6</div><div>5</div><div>4</div><div>3</div><div>2</div><div>1</div>

我想做的是创建一个类似的功能，该功能将与Angular一起使用。如何编写具有以下签名的函数，该函数将与Angular一起使用，并使用已处理的HTML调用回调函数？

function angularToHTML(html, data, callback) {
  // Code goes here...
}

编写angularToHTML函数

0 个答案: