[英]Run an angular directive inside other javascript framework template
I'm porting an angular application to ember.js for learning purposes. 我出于学习目的将一个有角度的应用程序移植到ember.js。 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. 由于移植该组件会花费很多时间,并且我想从前端应用程序开始,因此我希望能够在ember组件/模板中呈现angular指令并将变量传递给该指令。
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. 如果无法使用模板,则也可以通过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 更新1:在余烬中使用角度引导进行更新的版本,它可以正常工作,但我仍然必须弄清楚如何在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. 我自己找到了解决方案(也许有一些更好的方法可以做到这一点),我所要做的就是手动创建并引导角度模块,并设置要在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 销毁视图的根元素时,应自动销毁角度,而不会导致内存泄漏
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.