在没有jQuery的情况下在AngularJS中扩展DOM对象的推荐方法？

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!

Answer 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'});

Answer 2

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!