How to send HTML email with AngularJS?

Question

I am using a cordova email plugin in that works when I send simple text.

However, I am trying to instead use a template to construct the body of the email. I thought $compile would do the trick so I created an on click function:

    $scope.openShare = function (title,body) {
    var templateURL = "templates/roi-email.html";   
    $http.get(templateURL).success(function(data, status, headers, config) {
            var templateRendered = $compile( data )( $scope );

           if(window.plugins && window.plugins.emailComposer) {
                       window.plugins.emailComposer.showEmailComposerWithCallback(function(result) {
                    console.log("Response -> " + result);
                }, 
                title, // Subject
                templateRendered,                     // Body
                [],    // To
                null,                    // CC
                null,                    // BCC
                true,                   // isHTML
                null,                    // Attachments
                null);                   // Attachment Data
            }

However, templateRendered is not a string object. I think it is an mg-view object.

So how do covert the raw html in 'data' to a rendered string to i.e., templateRendered to pass to the email composer?

coma · Accepted Answer · 2014-09-14 17:10:22Z

4

Use an angular element and don't forget to trigger the $apply on the used scope:

http://jsfiddle.net/coma/o63wvscn/

app.controller('Main', function($scope, $compile, $timeout) {

    var scope = angular.extend($scope.$new(), {
        user: {
            email: '[email protected]'
        }
    });

    var email = angular.element('<div><p>{{ user.email }}</p></div>');
    $compile(email)(scope);

    scope.$apply();
    alert(email.html());
});

answered Sep 14, 2014 at 17:10

coma

16.7k4 gold badges53 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sylvain · Accepted Answer · 2014-09-14 17:14:02Z

1

$compile returns the DOM element; not a string. So you can access templateRendered.html() (jQuery) to get the content. However, as the doc says:

After linking the view is not updated until after a call to $digest which typically is done by Angular automatically.

So you need to wait (or trigger one) for the current digest cycle to finish before you access templateRendered.html().

see a working example : http://plnkr.co/edit/cYsS1c7GbEVRP7RODHvx?p=preview

answered Sep 14, 2014 at 17:14

Sylvain

19.3k26 gold badges103 silver badges148 bronze badges

1 Comment

coma Over a year ago

Nope, as you can see here docs.angularjs.org/api/ng/function/angular.element , the html method is already included in jqLite, no need of adding any jQuery at all. Btw, consider using a new scope in order to avoid pollution.

Collectives™ on Stack Overflow

How to send HTML email with AngularJS?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related