Ember How to Run Angular Directive and How to Import Angular

Question

I am trying to use the angular-filemanager addon on Ember and have not been successful at all. I found this other question on stackoverflow which says how to run an angular directive inside Ember, but it didn't help much.

Run an angular directive inside other javascript framework template

import Component from 'ember-component';
import angular from 'angular';

export default Component.extend({
  didInsertElement: function() {
    debugger;
    let model = this.get('model');
    angular.module('myapp', []).directive('somedirective', function() {
        return { template: 'test {{ model[0] }} test' };
    }).run(function($rootScope){ $rootScope.model = model; });

    angular.bootstrap(this.element, ['myapp']);
  }
});

I installed angular with bower install --save angular and tried to import it like in the code above, but it doesn't work. Do I have to import it from ember-cli-build.js file or something like that?

Also, can someone please explain to me what this code is doing? I think it is creating an angular module which returns that template when the component is used.. so do I just call the component and it works with no template for the component? Like {{component-name model=model}}?

I think you need to look at github.com/miguelcobain/ember-paper. — Ebrahim Pasbani

Ericky Ericky · Accepted Answer · 2017-01-19T17:33:54

I just had to put app.import('bower_components/angular/angular.js'); in the ember-cli-build.js inside modules.exports function. Then, I also added "angular" to the predef section of .jshintrc to avoid angular not defined error.

Ember How to Run Angular Directive and How to Import Angular

1 Answers