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'、その属性を評価して分離スコープに挿入できるようにします。そのため、'@' がタイトルに使用されます。解決策の 1 つは、ディレクティブに分離スコープを使用せず、 を使用してディレクティブのスコープ$observeに設定textすることです。http://jsfiddle.net/sEMeA/9/を参照

于 2012-11-12T15:42:12.007 に答える