javascript - angularjs 模板绑定(bind)

Question

我开发了一个 transclude 指令，并将其设置为使用 angularjs 模板脚本，一切正常，但我仍然无法访问绑定(bind)数据。

我的代码:

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

链接函数内的范围(....)显示正确的标题，但在 html 中不起作用:

方框{{标题}}

链接1链接2

我想我错过了一件事，但我无法弄清楚，我需要你的帮助来完成这个周期。

提前致谢，

Answer 1

包含 Angular 绑定(bind)表达式的模板元素必须首先编译，然后再链接。编译阶段准备模板，而链接阶段为绑定(bind)表达式设置 $watchers。

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