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对象的推荐方法？

2 个答案: