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

Question

我正在使用 angularJS（没有 jQuery）、lo-dash.js 和 coffeescript..

下面是我的代码：

      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);

看起来有点笨拙..我知道如果我可以使用 jQuery 会非常简单但不幸的是我没有导入 jQuery 因为 AngularJS 建议不要这样做这个..

有人对重构它们有什么建议吗？（最好的方法可能是将它们全部放在 css.. 但是 src 应该是动态的并且 allowfullscreen 似乎不被 CSS.. 支持。）谢谢！

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

像下面这样的指令怎么样（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;
}]);

用法很简单：-

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

我认为指令应该是 DOM 操作和包含子元素的正确方法。如果您需要更多控制，可以查看 $compile.

如果对您有帮助，请标记为答案！

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

Recommended way to extend DOM object in AngularJS without jQuery?

javascript

angularjs

dom

coffeescript

underscore.js