jQuery없이 AngularJS에서 DOM 객체를 확장하는 데 권장되는 방법은 무엇입니까? 나는 보라 - dash.js 및 커피 스크립트 (jQuery를하지 않고) AngularJS와를 사용하고

Question

.. 아래

내 코드입니다 : 조금 서투른 보인다

이

 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를 사용할 수 있지만 불행히도 AngularJS가 이것을 권장하지 않기 때문에 jQuery를 가져 오지 않았습니다.

누구나 리팩토링에 대한 제안이 있습니까? (가장 좋은 방법은 모두 CSS에 넣을 수 있습니다 ..하지만 src은 동적이어야하며 allowfullscreen는 CSS에서 지원하지 않는 것 같습니다.) 감사합니다!

Answer 1

방법 아래 같은 지침 (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 조작과 transcluding 갈 수있는 올바른 방법으로해야한다고 생각 자식 요소. 더 많은 제어가 필요한 경우 $compile을 살펴볼 수 있습니다.

도움이 될 경우 답을 표시해주세요.

Answer 2

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