javascript - AngularJS : Customizing the template within a Directive that includes references to scoped attributes

Question

我正在尝试在指令中自定义模板并包含对父范围中的属性的引用。我对 Angular 还很陌生，但我已经做了相当多的搜索，并且我的尝试基于 Customizing the template within a Directive 。但是，如果我将对父作用域变量的引用作为指令的属性传递，则它不会得到解析，可能是因为在调用编译函数时它仍然是未定义的。

我的指令定义如下所示:

app.directive('sectionHeader', function() {
  return {
    restrict: 'EC',
    replace: true,
    transclude: true,
    scope: {sectionName:'@sectionName', imageUrl:'@imageUrl'},
    compile: function(element, attrs) {
      var imageHtml = attrs.hasOwnProperty('imageUrl') ? '<div style="float: left; padding-right: 5px;"><img class="float_left" src="' + attrs.imageUrl + '" alt=""/></div>' : '';
      var htmlText =
        '<div>' + imageHtml + '<h1 class="float-left">' + attrs.sectionName + '</h1>' +
        '<div class="clear"></div>' +
        '<div class="modal_hr"></div></div>';
      element.replaceWith(htmlText);
    },
  };
});

我正在使用这样的指令:

 <div class="section-header" section-name="{{currentFeatureName}}"></div>

问题是在指令上调用编译函数时，我的 Controller 中的 {{currentFeatureName}} 变量似乎没有定义。

我考虑解决这个问题的一种方法是在compile函数中在sectionName属性上设置一个观察者函数，当它看到变化时更新h1元素内容。这看起来有点笨拙，我想知道是否有更好或更优雅的方法来做到这一点。

Answer 1

查看 Directive docs 中的 $observe 函数.

但除此之外，实际上似乎没有必要做你想做的事情。请参阅:

var app = angular.module('plunker', []);
app.controller('AppController',
    [
      '$scope',
      function($scope) {
        $scope.currentFeatureName = 'Current Feature Name';
        $scope.imageUrl = "https://lh3.googleusercontent.com/GYSBZh5RpCFwTU6db0JlHfOr_f-RWvSQwP505d0ZjWfqoovT3SYxIUPOCbUZNhLeN9EDRK3b2g=s128-h128-e365";
      }
    ]
  );

app.directive('sectionHeader', function() {
  return {
    restrict: 'EC',
    replace: true,
    transclude: true,
    scope: {
      sectionName:'@',
      imageUrl:'@'
    },
    template: '<div><div style="float: left; padding-right: 5px;" ng-show="imageUrl"><img class="float_left" ng-src="{{imageUrl}}" alt=""/></div><h1 class="float-left">{{sectionName}}</h1><div class="clear"></div><div class="modal_hr"></div></div>'
  };
});

HTML:

<div ng-controller="AppController">
  <div class="section-header" section-name="{{currentFeatureName}}" image-url="{{imageUrl}}"></div>
</div>

Plunker.