Run an angular directive inside other javascript f

Question

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

Answer 1

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