AngularJS指令は連想配列

Question

で探して私はディレクティブの属性としてmentionnedキーからスコープデータに含まれる連想配列の対応する文字列を含むHTMLのテンプレートを返す必要がありAngularJSディレクティブを作成しようとしています。

私はコードスニペットがより明確になると思う：

範囲での私の連想配列：

ディレクティブが呼び出すされますどのように

{"mapData": 
    {"menu1":"Apples", 
    "menu2":"Strawberries"}} 

：あるべき

<div ng-controller="menuAngularController"> 
    <menu-dir menuData="menu1"></menu-dir> 
</div> 

HTMLを角度の解釈後に返さ：

<li dropdown class='dropdown dropdown-fw'> 
    <a href='#' class='dropdown-toggle' dropdown-toggle>Apples 
      <span class='caret'></span> 
    </a> 
    <ul class='dropdown-menu' role='menu' ng-transclude></ul> 
</li> 

ノー説得力の結果で、働いているディレクティブ：

angular.module('Module.Directives',[]).directive('menuDir', function(){ 
    restrict:'E', 
    ̶t̶r̶a̶n̶c̶l̶u̶d̶e̶ transclude:true, 
    replace:true, 
    scope:{ 
     menuData:'@' 
    }, 
    template :"<li dropdown class='dropdown dropdown-fw'><a href='#' class='dropdown-toggle' dropdown-toggle>"+ 
      "{{test}} <span class='caret'></span></a>"+ 
      "<ul class='dropdown-menu' role='menu' ng-transclude></ul></li>", 

    link:function(scope, elem, attrs, controllers ̶,̶ ̶$̶s̶c̶o̶p̶e̶) { 
     //I put $watch because my AngularJS controller load data from an external service, so I listen change on data loaded 
     scope.$watch('menuData', function(newValue, oldValue){ 
       //I get the data of the array by the id 
       scope.test = "{{mapData['"+newValue+"']}}"; 
     }); 
    }); 

角度コントローラ：

angular.module('MenuAngular.Controller', []) 
.controller('menuAngularController', MenuAngularController);  
    MenuAngularController.$inject = ['menuAngularServices', '$scope']; 
    function MenuAngularController(menuAngularServices, $scope){ 
     //the service (tested, all is ok on this side) that return the data on a map 
     menuAngularServices.initMenu.query({},function(data){ 
      $scope.mapData= data.mapMessages; 
     }, 
     function(error){ 
      console.log(error); 
     }); 

は実は、私は{{地図データ[メニュー1]}}」を得るために成功"画面には表示されますが、Angularの値には置き換えられません。

誰もがアイデアを持っていますか？ （私の英語レベルについて申し訳ありませんが、事前に感謝します！）を

Answer 1

指令はkebab-caseに正規化される必要がある属性：詳細については

<!-- ERRONEOUS 
<div ng-controller="menuAngularController"> 
    <menu-dir menuData="menu1"></menu-dir> 
</div> 
--> 

<!-- BETTER --> 
<div ng-controller="menuAngularController"> 
    <menu-dir menu-data="menu1"></menu-dir> 
</div> 

、ディレクティブの使用しているのでAngularJS Developer Guide - Directive Normalization

---

更新

を見ます隔離スコープでは、ディレクティブスコープは親スコープからのデータを継承しません。親スコープからのすべてのデータは、バインディングで定義する必要があります。

<menu-dir menu-data="menu1" map-data="mapData"></menu-dir> 

またウォッチャーを使用する必要がない、単に指示テンプレートの角度表現置く：あなたはどこかで地図データを持っていると仮定すると

app.directive('menuDir', function(){ 
    restrict:'E', 
    transclude:true, 
    //replace:true, //REPLACE is DEPRECATED 

    scope: { 
     menuData:'@', 
     //ADD mapData one-way binding 
     mapData: '<' 
    }, 
    //ADD {{test}} expression to template 
    template: ` 
     <li dropdown class='dropdown dropdown-fw'> 
      <a href='#' class='dropdown-toggle' dropdown-toggle> 
      {{mapData[menuData]}} <span class='caret'></span> 
      </a> 
      <ul class='dropdown-menu' role='menu' ng-transclude></ul> 
     </li>`, 

    link: function(scope, elem, attrs) { 
     //I put $watch because my AngularJS controller load data from an external service, so I listen change on data loaded 
     /* REMOVE watcher 
     scope.$watch('menuData', function(newValue, oldValue){ 
       //I get the data of the array by the id 
       scope.test = "{{mapData['"+newValue+"']}}"; 
     });*/ 
    } 
}); 

Answer 2

まず最初：パス$scope.mapDataビュー

ディレクティブ内側：

<menu-dir menu-data="menu1" map-data="mapData"></menu-dir> 

ディレクティブ：

scope:{ 
    menuData: '@', 
    mapData: '=' 
}, 

2番目のこと：変更するscope.test割り当て：

scope.test = "{{mapData['"+newValue+"']}}"は、stringを作成する割り当てです。事実、これはあなたが見るものです！

は、あなたは、単に実行します。scope.test = menuData[newVal];