Run an angular directive inside other javascript framework template

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

At the very least, I don't think you'll have a good time doing this. :) As for the question, angular needs to compile the dom it's supposed to be active on. So you need to find a way to trigger that angular compilation when ember changes views. — Sergio Tulentsev
For learning purposes, you'll be better off reimplementing the whole thing from scratch, part by part. Ember has more requirements to the structure of an app and it doesn't have directives. So the direct port is unlikely to be possible. — Sergio Tulentsev
@SergioTulentsev I wanted to reimplement everything except the external dependency, anyway maybe I can wrap everything in the ember component including the angular bootstrapping — alex88

alex88 alex88 · Accepted Answer · 2015-04-03T09:33:18

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

Run an angular directive inside other javascript framework template

1 Answers