运行其他 javascript 框架模板中的 angular 指令

Question

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

由于移植该组件会花费很多时间，而且我想从前端应用程序开始，我希望能够在 ember [=25= 中呈现 angular 指令] 并将变量传递给该指令。

可以找到一个无效的示例 here，如您所见，我希望能够使用来自 ember 模板的指令。

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

更新 1：updated 版本在 ember 中使用 angular 自举，它工作正常但我仍然需要弄清楚如何在 angular 中传递变量

Answer 1

我自己找到了解决方案（也许有一些更好的方法可以做到这一点），我所要做的就是手动创建和bootstrap angular 模块并设置我想在 rootscope 中传递的变量。

假设有一个像

这样的ember模板

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

在视图中执行：

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

销毁视图的根元素时angular应该自动销毁而不会发生内存泄漏

运行其他 javascript 框架模板中的 angular 指令

Run an angular directive inside other javascript framework template

javascript

ember.js

angularjs

angularjs-directive

运行 其他 javascript 框架模板中的 angular 指令

Run an angular directive inside other javascript framework template

javascript

ember.js

angularjs

angularjs-directive

运行其他 javascript 框架模板中的 angular 指令