Recommended way to extend DOM object in AngularJS without jQuery?

Question

I'm using angularJS (without jQuery), lo-dash.js and coffeescript..

Below is my codes:

      div = document.getElementById('play')
      iframe = document.createElement('iframe');
      iframe.id='iframe_played'
      iframe.width = '420'
      iframe.height = '315'
      iframe.src = './home.html#/video/'+ currentMarker.id
      iframe.frameborder = '0'
      iframe.allowfullscreen = 'true'
      iframe.webkitallowfullscreen = 'true'
      iframe.mozallowfullscreen = 'true'
      div.appendChild(iframe);

which looks a little clumsy.. I know it would be super easy if I could use jQuery but unfortunately I didn't import jQuery becasue AngularJS recommend not to do this..

Does anyone have suggestions about refactoring them? (The best way may be put them all in css.. But the src should be dynamic and allowfullscreen seems not supported by CSS..) Thanks!

http://stackoverflow.com/questions/867916/creating-a-div-element-in-jquery — degr, Feb 04 '15 at 10:03

degr · Answer 1 · 2015-02-04T10:54:55.743

1

function newElement(name, params){
var out = document.createElement(name);
for(var i in params){
out.setAttribute(i, params[i])
}
return out;
}

var div = newElement('div', {'class': 'myDiv', id: 'divId'});

edited Feb 04 '15 at 10:54

answered Feb 04 '15 at 10:02

degr

1,559
1
19
37

amitthk · Accepted Answer · 2015-02-04T10:55:29.207

How about a directive like below ( JSFiddle here ):-

    todoApp.directive('linkFrame', [function () {
    var directive = {};
        directive.restrict = 'A';
        directive.transclude = 'true';
        directive.scope = { ngModel: '=ngModel'};
    directive.template = '<iframe width="420" height="315" ng-src="{{ngModel}}"></iframe>';

        directive.link = function ($scope, element, attributes) {
        };
    return directive;
}]);

Usage is simple:-

<div link-frame ng-model="lnk.link"></div>

I think directive should be the right way to go for DOM manipulation and transcluding the child element. If you would need more control, you can take a look at $compile.

Please mark as answer if this helps!

Recommended way to extend DOM object in AngularJS without jQuery?

2 Answers2