Executing an angular directive within the template of another javascript framework

Question

Executing an angular directive within the template of another javascript framework

I am currently in the process of converting an angular application to ember.js as a way to expand my skill set. Within our project, we have a custom angular module that was created through a directive.

Due to the time it will take to port that component over, I have decided to start with the frontend application. My goal is to render an angular directive within an ember component/template and pass a variable to this directive.

An example that does not work can be seen here. As you can see, I am trying to utilize a directive from an ember template.

If rendering it via template is not possible, I am open to doing so through JavaScript as well.

Update 1: An updated version has been provided with angular bootstrapping in ember. It functions correctly, but I still need to figure out how to pass the variable into angular.

javascript angularjs ember.js angularjs-directive

Answer 1

Answer №1

I managed to solve the issue on my own (although there may be better approaches out there). All I did was manually create and bootstrap the angular module, then set the desired variable in the rootscope.

Imagine you 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, add:

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 removing the root element of the view, angular should automatically clean up without causing memory leaks.

Answer 2

I managed to solve the issue on my own (although there may be better approaches out there). All I did was manually create and bootstrap the angular module, then set the desired variable in the rootscope.

Imagine you 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, add:

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 removing the root element of the view, angular should automatically clean up without causing memory leaks.

Executing an angular directive within the template of another javascript framework

Answer №1

Similar questions

What could be the reason for the lack of error handling in the asynchronous function?

Execute functions during jquery's .animate() operation

Conceal additional recipients in the "to" address field when sending emails with Node.js using Nodemailer

Retrieving data from an array in VueJS

retrieving the file directory from a folder with the help of ajax

Is it possible to asynchronously retrieve the information from the HTTP request body in a Node.js environment?

Tips for testing nested subscribe methods in Angular unit testing

How to access the CSS and JS files in the vendor folder using linemanjs

Transfering data to Handlebars while rendering a template

The form data is being passed as null to HttpContext.Current.Request

Deleting a record by sending an HTTP request and then removing the corresponding object from an array in Vue.js

The operation was computed twice

Obtain the final value within a URL's path segment

Scrolling to the next wrap class in jQuery is not functioning properly with the chatbox and ScrollTop

What is the reason behind Angular generating files with 'es5' and 'es2015' extensions instead of 'es6' (or no extension)?

Utilizing NodeJS to overcome challenges with social sharing and search engine optimization on single-page frameworks such as AngularJS

Nested JSON in AngularJS filter usage

Precise coordination of a singular model through the use of angularFireCollection

AngularJS with a github redirect_uri allows for seamless integration of Github

Issue with nextjs not returning the updated object correctly