javascript - 在其他 javascript 框架模板中运行 Angular 指令

Question

出于学习目的，我正在将 Angular 应用程序移植到 ember.js。 在我们的项目中，我们使用通过指令创建的自定义 Angular 模块。

由于移植该组件将花费大量时间，并且我想从前端应用程序开始，因此我希望能够在 ember 组件/模板内渲染 Angular 指令，并将变量传递给该指令。

可以找到一个不起作用的示例 here正如您所看到的，我希望能够使用 ember 模板中的指令。

如果无法通过模板实现，那么通过 javascript 渲染也可以。

更新1:updated在 ember 中使用 Angular 引导的版本，它工作正常，但我仍然需要弄清楚如何在 Angular 内传递变量

Answer 1

我自己找到了解决方案(也许有一些更好的方法来做到这一点)，我所要做的就是手动创建和引导 Angular 模块并设置我想要在 rootscope 中传递的变量。

假设有一个 ember 模板，例如

<script type="text/x-handlebars" data-template-name="index">
  <div ng-app="myapp">
    <div somedirective="model"></div>
  </div>
</script>

在 View 中执行:

App.IndexView = Ember.View.extend({
  didInsertElement: function() {
    model = this.get('controller.model');
    angular.module('myapp', [])
    .directive('somedirective', function() {
        return { template: 'test {{ model[0] }} test' };
    }).run(function($rootScope){ $rootScope.model = model; });

    angular.bootstrap(this.element, ['myapp']);
  }
});

销毁 View 根元素时，Angular应该自动销毁，不会造成内存泄漏