angularjs 템플릿 바인딩

Question

나는 transclude 지시어를 개발했으며 angularjs 템플릿 스크립트를 사용하도록 설정했지만 모든 것이 잘 작동하지만 여전히 바인드 데이터에 액세스 할 수 없습니다.

내 코드 :

index.html을

<div side-element="box" title="Links"> 
       <ul> 
        <li>Link 1</li> 
        <li>Link 2</li> 
       </ul> 
</div> 

<script id="box" type="text/ng-template"> 
      <div class="side-box"> 
       <div class="content"> 
        <h2 class="header">Box {{ title }}</h2> 
        <span class="content" ng-transclude></span> 
       </div> 
      </div> 
     </script> 
     <script id="ad" type="text/ng-template"> 
      <div class="side-ad"> 
       <div class="content"> 
        <h2 class="header">AD {{ title }}</h2> 
        <span class="content" ng-transclude></span> 
       </div> 
      </div> 
     </script> 

app.js :

가

angular.module('myApp.directives') 
    .directive('sideElement', function ($templateCache, $log) { 
return { 
    scope: { 
    title: '@' 
    }, 
    transclude: 'element', 
    link: function(scope, element, attrs, ctrl, transclude){ 
    var template = $templateCache.get(attrs.sideElement); 

    var templateElement = angular.element(template); 
    $log.info(scope.title);//Output the title i put in the html which is (Links) 
    transclude(scope, function(clone){ 
     element.after(templateElement.append(clone)); 
    }); 
    } 
}; 
}); 

링크 기능 (....) 내부 범위가 정확한 제목 displaies 있지만 html로 작동하지 않습니다.

상자 {{title}}

링크 1 링크 2

나는 한 가지를 놓쳤다 고 생각하지만, 그것을 이해할 수 없다고 생각합니다.주기를 완료하는 데 도움이 필요합니다.

사전에

고맙습니다을

Answer 1

각 바인딩 식을 먼저 컴파일하고 연결해야합니다 포함 된 템플릿 요소입니다. 컴파일 단계는 템플리트를 준비하는 반면 연결 단계는 바인딩 표현식에 대한 $ watcher를 설정합니다. 여기 Demo Here

작동합니다 컴파일 기능입니다 :

.directive('sideElement', function ($templateCache, $compile, $log) { 

    return { 
     restrict: 'A', 
     transclude: true, 
     scope:'@', 
     compile: function(element, attrs) { 
     var template = $templateCache.get(attrs.sideElement); 
     var templateElement = angular.element(template); 
     element.append(templateElement); 
     return function(scope, element, attr, ctrl, transclude) { 
      $log.info(scope.title); 
     } 
     } 
    }