新しいスコープを作成せずにディレクティブテンプレートに変数を渡す

Question

新しいスコープを作成せずにディレクティブに属性を使用して変数を渡す方法はありますか？

HTML

<div ng-click='back()' button='go back'></div> 

JS

.directive('button', function() { 
    return { 
     scope: { 
      button: '@' 
     }, 
     template: "<div><div another-directive></div>{{button}}</div>", 
     replace: true 
    } 
}) 

問題はng-click='back()'が今ディレクティブのスコープを参照していることです。 私はまだng-click='$parent.back()'できますが、それは私が欲しいものではありません。

Answer 1

デフォルトでは、ディレクティブは新しいスコープを作成しません。あなたがその明示したい場合は、あなたの指示にscope: falseを追加：新しいプロパティ、buttonは、スコープに作成されているので

<div ng-click='back()' button='go back!'></div> 

angular.module('myApp').directive("button", function() { 
    return { 
     scope: false, // this is the default, so you could remove this line 
     template: "<div><div another-directive></div>{{button}}</div>", 
     replace: true, 
     link: function (scope, element, attrs) { 
      scope.button = attrs.button; 
     } 
    }; 
}); 

fiddle

、あなたが正常に作成する必要があります新しい子供の範囲は、@ ardentum-cとしてscope: trueを使用して彼の答えにあります。新しいスコープは親スコープのprototypially inheritになります。そのため、$parent.back()をHTMLに配置する必要はありません。

言及しておきたいもう一つの言い回し：私たちがreplace: trueを使用していても、その要素をクリックするとまだback()が呼び出されます。これは「置換処理によって、すべての属性/クラスが古い要素から新しい要素に移行される」ために機能します。 - directive doc
ng-click='back()' button='go back!'は、ディレクティブのテンプレートの最初のdivに移行されます。

Answer 2

この場合、コンパイルを使用する必要があります。

angular.module('myApp').directive("button", function() { 
    return { 
     template: "<div><div another-directive></div>{{button}}</div>", 
     replace: true, 
     scope: true, 
     compile: function (tElement, tAttrs) { 
      // this is link function 
      return function (scope) { 
       scope.button = tAttrs.button; 
      };    
     } 
    }; 
}); 

ここはjsfiddle exampleです。