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
