在其他 javascript 框架模板中运行 angular 指令 [英] Run an angular directive inside other javascript framework template

问题描述

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

由于移植该组件需要很多时间，而且我想从前端应用程序开始，所以我希望能够在 ember 组件/模板中呈现一个 angular 指令并将变量传递给该指令.

可以在此处找到一个非工作示例，正如您所看到的，我想能够使用来自 ember 模板的指令.

如果模板无法实现，也可以通过 javascript 呈现它.

更新 1:更新 版本，在 ember 中使用角度引导，它工作正常，但我还是要弄清楚如何在angular内部传递变量

解决方案

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

假设有一个像这样的 ember 模板

在视图中执行:

App.IndexView = Ember.View.extend({didInsertElement:函数(){model = this.get('controller.model');angular.module('myapp', []).directive('somedirective', function() {返回{模板:'测试{{模型[0]}}测试'}；}).run(function($rootScope){ $rootScope.model = model; });angular.bootstrap(this.element, ['myapp']);}});

销毁视图的根元素时angular应该自动销毁，不会出现内存泄漏

I'm porting an angular application to ember.js for learning purposes. Inside our project we use a custom angular module we created via a directive.

Since porting that component will take a lot of time and I wanted to start from the frontend application, I want to be able to render an angular directive inside an ember component/template and pass a variable to this directive.

A non working example could be found here and as you can see I wanted to be able to use a directive from an ember template.

If it's not possible by template it would be ok too to render it via javascript.

Update 1: updated version with angular bootstrapping in ember, it works fine but I still have to figure out how to pass the variable inside angular

解决方案

I've found the solution by myself (maybe there are some better ways to do this), all I had to do is to manually create and bootstrap the angular module and set the variable I wanted to pass in the rootscope.

Suppose to have an ember template like

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

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

When destroying the root element of the view angular should be automatically destroyed without memory leaks

这篇关于在其他 javascript 框架模板中运行 angular 指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！