angularjs template binding

Question

I have developed a transclude directive and I set it to use angularjs template script everything works fine but I still cannot access the bind data.

My code:

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

the scope inside the link function(....) displaies the correct title but it doesn't work in the html:

Box {{ title }}

Link 1 Link 2

I think I missed one thing but I can't figure it out, I need your help to complete the cycle.

Thanx in advance,

Michael Kang · Accepted Answer · 2014-05-22 14:24:32Z

2

The template element that contains the angular binding expressions must be compiled first, and then linked. The compilation phase prepares the template, while the linking phase sets up your $watchers for your binding expressions.

Demo Here

Here is a compile function that should work:

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

edited May 22, 2014 at 14:24

answered May 22, 2014 at 7:44

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ya Basha Over a year ago

Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <span class="content" ng-transclude="">

Michael Kang Over a year ago

change your directive definition to 'transclude: true'

Ya Basha Over a year ago

it binds the title, but it keeps generating the same error

Michael Kang Over a year ago

I noticed in your template that you have an ng-transclude directive already. Then I don't think you need to call the transclude() function and append the clone manually. Let me know how it goes!

Ya Basha Over a year ago

no it didn't work, the same error generated even when removing the transclude() function

|

Collectives™ on Stack Overflow

angularjs template binding

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related