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

Run an angular directive inside other javascript framework template

本文关键字：运行 angular 指令 其他 javascript 框架      更新时间：2023-09-26

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

由于移植该组件将花费大量时间，并且我希望从前端应用程序开始，因此我希望能够在ember组件/模板中呈现一个角度指令，并将一个变量传递给该指令。

在这里可以找到一个不起作用的例子，正如你所看到的，我希望能够使用来自ember模板的指令。

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

更新1：更新了ember中的angular bootstrapping版本，它运行良好，但我仍然需要弄清楚如何在angular 内部传递变量

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

假设有一个类似的成员模板

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

在视图do:

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，而不会发生内存泄漏

相关文章：