javascript - 指定指令的元素上不相关属性中的未处理表达式

Question

我的 HTML 中有一个指定指令的 span 元素:

<div ng-controller="MyCtrl">
  <span id="theSpan" my-directive="{{data.one}}" title="{{data.two}}">
</div>

该指令将一些 HTML 附加到元素:

var myApp = angular.module('myApp', []);

myApp.directive('myDirective', function() {
  return {
    template: "<div>{{text}}</div>",
    scope: {
      text: "@myDirective"
    }
  };
});

function MyCtrl($scope) {
  $scope.data = {
    one: 'One!!',
    two: 'Two!!'
  };
}

此代码生成以下 DOM 结构:

<div ng-controller="MyCtrl" class="ng-scope">
  <span id="theSpan" my-directive="One!!" title="" class="ng-isolate-scope ng-scope">
    <div class="ng-binding">One!!</div>
  </span>
</div>

问题是 span 上的 title 属性缺少数据。我可以通过将 title: '@' 添加到作用域来使其正常工作，如下所示:

myApp.directive('myDirective', function() {
  return {
    template: "<div>{{text}}</div>",
    scope: {
      text: "@myDirective",
      title: '@' // <-- added
    }
  };
});

这导致了这个 DOM:

<div ng-controller="MyCtrl" class="ng-scope">
  <span id="theSpan" my-directive="One!!" title="Two!!" class="ng-isolate-scope ng-scope">
    <div class="ng-binding">One!!</div>
  </span>
</div>

如何编写我的指令以便保留元素的属性，而不必在指令的范围内指定它们？ (也许更好的问题是:为什么不评估 title 属性？)

这里是 a jsFiddle证明问题。

Answer 1

问题是通过做

scope: {
  text: "@myDirective"
}

您正在为 span 元素创建一个独立的范围。因此，当 {{data.two}} 被评估时，范围内没有 data 属性。 '@myDirective' 允许评估该属性并将其插入隔离范围。这就是“@”用于标题的原因。一种解决方案可能是不为指令使用隔离范围，然后使用 $observe 在指令范围内设置 text。参见 http://jsfiddle.net/sEMeA/9/