複数のスコープ変数をanglejsのカスタムディレクティブに渡す方法

Question

コントローラからカスタムディレクティブに2つのスコープ変数を渡そうとしていますが、それらの両方にアクセスする際に問題があります。モデルはディレクティブとコントローラで同じです。

HTML：：

<myDirective data="var1" item="var2"></myDirective> 

コントローラー：

$scope.var1="abc"; 
$scope.var2="xyz"; 

指令：

app.directive('myDirective', function() { 

     return { 
      restrict: 'E', //E = element, A = attribute, C = class, M = comment   
      scope: { 
        var1: '=' 
        var2:'=' 

        }, 

      templateUrl: 'myTemplate.html', 

      link: function ($scope, element, attrs) { 


        } 
     } 
    }); 

TemplateUrl：myTemplate.html

<div>{{var1}}</div> // This works 
<div>{{var2}}</div> // This doesn't works 

012ここ コードです

どのように私は両方を使用できますか？

Answer 1

は

<popover data="var1" item="var2"></popover> 

JS

app.directive('popover', function() { 
    return { 
     restrict: 'E', //E = element, A = attribute, C = class, M = comment 
     scope: { 
      data: '=', 
      item: '=' 
     }, 
     templateUrl: 'myTemplate.html', 
     link: function (scope, element, attrs) { 
      console.log(scope.data, scope.item); 
     } 
    } 
}); 

Answer 2

はDDOで宣言された名前と一致するようにテンプレートを変更して、あなたのコードでこれらの変更を行います。

<myDirective var1="var1" var2="var2"></myDirective> 

属性名としてdataを使用しないでください。これは、正規化中に削除される予約済みプレフィックスです。属性の正規化の詳細については、AngularJS Developer Guide - Directive Normilizationを参照してください。