JavaScript에서 각도 명령 초기화

Question

템플릿에 지시문이 있습니다. 나는 기본적으로 리플릿지도에서 팝업으로 해당 템플릿에서 같은 HTML을 포함하려면

<ul class="activity-stream"> 
    <my-activity-stream-item ng-repeat="activity in vm.activities" activity="activity"></my-activity-stream-item> 
</ul> 

,하지만 난 방법을 코드에서 그것을 만드는 아무 생각이 : 그것은 좋은 일하고있어.

for (i = 0; i < activities.length; i++) { 
    var activity = activities[i]; 
    var marker = L.marker([activity.location.lat, activity.location.lng]); 
    marker.type = activity.type; 
    marker.bindPopup('<my-activity-stream-item activity="activity"></my-activity-stream-item>'); 
    marker.addTo(map); 
} 

난 정말 어떻게 든의 범위를 통과해야 같은 일에, 내가 느끼는 것을 기대하지 않았다 ...하지만 난 그것을 수행하는 방법에 관한 완전한 손실에 있어요 : 여기에 내가 뭘하려입니다 .

var app = angular.module('myPortal'); 

app.factory('TemplateService', TemplateService); 
app.directive('myActivityStreamItem', myActivityStreamItem); 

function myActivityStreamItem($compile, TemplateService) { 
    return { 
     restrict: 'E', 
     link: linker, 
     transclude: true, 
     scope: { 
      activity: '=' 
     } 
    }; 

    function linker(scope, element, attrs) { 
    scope.rootDirectory = 'images/'; 

    TemplateService.getTemplate('activity-' + scope.activity.type).then(function(response) { 
     element.html(response.data); 
     $compile(element.contents())(scope); 
    }); 
    } 
} 

function TemplateService($http) { 
    return { 
    getTemplate: getTemplate 
    }; 

    function getTemplate(templateName) { 
    return $http.get('/templates/' + templateName + '.html'); 
    } 
} 

-

EDIT (주 나는 단지 일주일 정도 각도 사용하고, 그래서 나에게 당신은 내가이 완전히 잘못 했어 생각하는 경우 알려 주시기 바랍니다) :을 나는 Chandermani의 충고를 따랐다 내 지시문을 ngInclude으로 바 꾸었습니다 :

<ul class="activity-stream"> 
    <li ng-repeat="activity in vm.activities" ng-include="'/templates/activity-' + activity.type + '.html'"></li> 
</ul> 

위대한 작품입니다! 나는 또한 ... 그러나 나는 확실히이 아니에요, 자바 스크립트에서 HTML을 컴파일 조쉬의 조언을 사용하려고

var link = $compile('<li ng-include="\'/templates/activity-' + activity.type + '.html\'"></li>'); 
var newScope = $rootScope.$new(); 
newScope.activity = activity; 
var html = link(newScope); 
marker.bindPopup(html[0]); 

이 나타나는 팝업을 초래하지만, 팝업에 포함 된 HTML 코멘트입니다 : <!-- ngInclude: '/templates/activity-incident.html' -->

어쨌든 li에있는 활동을 전달해야합니까?

편집 2 : 알 수 있습니다. Issue #4505에서 언급 한 바와 같이, 당신이 뭔가에 조각을 포장해야하는, 그래서 포장 내 ngIncludediv A의 :

var link = $compile('<div><ng-include src="\'/templates/activity-incident.html\'"></ng-include></div>'); 

Answer 1

원시 HTML을 페이지에 추가하고 각도 처리를 수행하려는 경우 언제든지 $compile 서비스를 사용해야합니다.

서식 파일에서 $compile을 호출하면 연결 기능이 반환되어 범위 개체를 바인딩 할 수 있습니다. 다음 DOM에 첨부 될 수있는 요소를 초래할 것이다 scope 객체에 해당 기능을 연결

var link = $compile('<span>{{someObj}}</span>'); 

.

//Or the scope provided by a directive, etc... 
var newScope = $rootScope.$new(); 

var elem = link(newScope); 

//Could also be the element provided by directive 
$('someSelector').append(elem); 

Angular가 DOM 요소를 처리하는 데 필요한 기본 흐름입니다. 보통 이것은 지시어를 통해 이루어지며, 아마도이 경우에도 필요한 것입니다.

Answer 2

내가 문제를 이해하지만 당신이 할 수있는 것은 ng-include 지시하고 그것을 사용하는 한 확실하지 템플릿을 동적으로로드하기 위해 템플릿 표현식을 사용할 수 있습니다. 예 :

<ul class="activity-stream"> 
    <li ng-repeat="activity in vm.activities" ng-include="'/templates/activity-' + activity.type + '.html'"></li> 
</ul> 

여기에 지침이 필요하지 않을 수도 있습니다.