在没有 jQuery 的情况下扩展 AngularJS 中的 DOM 对象的推荐方法?
Recommended way to extend DOM object in AngularJS without jQuery?
我正在使用 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.. 支持。)谢谢!
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'});
像下面这样的指令怎么样(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.
如果对您有帮助,请标记为答案!
我正在使用 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.. 支持。)谢谢!
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'});
像下面这样的指令怎么样(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.
如果对您有帮助,请标记为答案!