Javascript AngularJS：在包含范围属性引用的指令中自定义模板

我试图在指令中自定义模板，并在父范围中包含对属性的引用。我对Angular很陌生，但我已经做了相当多的搜索，并且我的尝试都是基于此。但是，如果我将对父范围变量的引用作为指令的属性传递给该指令，则无法解析该变量，可能是因为在调用编译函数时该变量尚未定义

我的指令定义如下所示：

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>

app.directive（'sectionHeader'，function（）{
返回{
限制：“EC”，
替换：正确，
是的，
作用域：{sectionName:'@sectionName'，imageUrl:'@imageUrl'}，
编译：函数（元素、属性）{
var imageHtml=attrs.hasOwnProperty（'imageUrl'）？“”：“”；
var htmlText=
''+imageHtml+''+attrs.sectionName+''格式+
'' +
'';
元素。替换为（htmlText）；
},
};
});

我使用的指令如下：

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>

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

---

我考虑过的一种解决方法是在compile函数中，在sectionName属性上设置一个observer函数，当它看到更改时更新h1元素内容。这似乎有点笨重，我想知道是否有更好或更优雅的方法可以做到这一点。

关于为什么这不起作用，你是对的。当编译和链接函数运行时，插值属性不可用，因为尚未发生将插值解析为值的摘要。你可以阅读更多关于这方面的内容。关于解决方案，您也是对的：使用

attrs.$observe（'sectionName'，function（val）{…}）

但是，看起来您不需要动态模板。如果这是您的模板：


{{sectionName}}

这样，在编译或链接函数中就不需要任何逻辑。也许此模式也会对您有所帮助。
请查看中的
$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>'
  };
});

var-app=angular.module（'plunker'，[]）；
app.controller（'AppController'，
[
“$scope”，
职能（$范围）{
$scope.currentFeatureName='当前功能名称'；
$scope.imageUrl=”https://lh3.googleusercontent.com/GYSBZh5RpCFwTU6db0JlHfOr_f-RWvSQwP505d0ZjWfqoovT3SYxIUPOCbUZNhLeN9EDRK3b2g=s128-h128-e365”；
}
]
);
应用程序指令（'sectionHeader'，函数（）{
返回{
限制：“EC”，
替换：正确，
是的，
范围：{
节名：'@'，
imageUrl:“@”
},
模板：“{sectionName}}”
};
});

HTML:



谢谢Josh，你的答案基本上和Stewie的一样，但他比你快了几分钟。如果我需要有条件地向其中一个标记添加一个属性，而不是将一个标记作为一个整体，那么我想我必须退回到使用$observe方法。事实上，根据答案的页脚，我比他领先了5分钟，但这并不重要。：-）“哦，我错了，很抱歉。”乔什·戴维德米勒先到了，他实际上同时回答了另一个问题。我有时认为乔希是个机器人。：-）@斯图：哈哈！机器人不会笑。或者策划报复。。。对吗？