2

我有一个带有span指定指令的元素的 HTML：

<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>

问题title是span. 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评估属性？）

这是一个演示问题的 jsFiddle。

4

1 回答 1

1

问题是通过做

scope: {
  text: "@myDirective"
}

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

于 2012-11-12T15:42:12.007 回答