AngularJS $compile 与 API 同步使用？

Question

我正在尝试使用一个库，该库接受一个表示 html 元素的字符串，并使用它来动态呈现该元素作为下拉列表的一部分，但是该库假定您使用的是 javascript 这样做。我试图将这个库包装在 angular 指令中，但我不确定如何使用 $compile 来完成。我的问题如下。

我正在使用的库获取一个对象并使用它来确定如何呈现元素。建议的 javascript 实施是：

render: {
    item: function(item) {
        return '<div><span>' + item.firstName + '</span></div>';
    }

但是，我想使用模板的内容，然后对其进行编译，以使其更 angular-esk。我有以下内容：

render: {
    item: function(item) {
        $scope.item = item;
        var things = jQuery($templateCache.get('testingTemplate.modal.nested'));
        var $el = $compile(things)($scope);
        $timeout(() => {
          return $el.prop('outerHTML');
        }).then(function(working) {
          return working;
        });
        console.log($el);
        return $el;
    }

我在这段代码中遇到的明显问题是 $el 的值未定义，因为此时承诺尚未完成，因此没有任何内容呈现给 DOM。有没有一种方法可以使 $compile 同步工作，或者我可以通过其他方式做到这一点，以便我可以使用模板并将其转换为正确的 html 表示形式？

已解决

我已经通过以下方式为将来遇到此问题的任何人解决了这个问题。请原谅命名不当的变量。

 render: {
    item: function(item, escape) {
        $scope.item = item;
        var randomUnique = Math.random().toString(36).substring(7);
        var things = jQuery("<div class='" + randomUnique  +  "'>" + $templateCache.get('testingTemplate.modal.nested') + "</div>");
        var $compiledEl = $compile(things)($scope);
        $timeout(() => {
          var placeHolder = jQuery('.' + randomUnique);
          placeHolder.replaceWith($compiledEl.prop('outerHTML'));
        });
        var hello = (things.prop('outerHTML'));
        return hello;
    }
}

Answer 1

找到了一个解决方案，虽然可能不是最好的，但它有效。请忽略命名不当的变量。

 render: {
    item: function(item, escape) {
        $scope.item = item;
        var randomUnique = Math.random().toString(36).substring(7);
        var things = jQuery("<div class='" + randomUnique  +  "'>" + $templateCache.get('testingTemplate.modal.nested') + "</div>");
        var $compiledEl = $compile(things)($scope);
        $timeout(() => {
          var placeHolder = jQuery('.' + randomUnique);
          placeHolder.replaceWith($compiledEl.prop('outerHTML'));
        });
        var hello = (things.prop('outerHTML'));
        return hello;
    }
}

AngularJS $compile 与 API 同步使用？

AngularJS $compile act synchronously for use with an API?

angularjs

asynchronous

compilation

synchronous

selectize.js