Javascript 用于查找关联数组的AngularJS指令

我试图创建一个AngularJS指令，它从一个被称为指令属性的键返回一个html模板，该模板包含与范围数据包含的关联数组对应的字符串

我认为代码片段将更加清晰：

范围中的我的关联数组：

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

指令将如何调用：

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

事实上，我成功地在屏幕上打印了“{mapData[menu1]}”，但没有被Angular的值替换

有人有主意吗？

---

（为我的英语水平感到抱歉，提前谢谢！）

第一件事：通过

$scope.mapData

内部指令

视图：

第二件事：更改

范围。测试
分配：

scope.test=“{mapData['”+newValue+“]}}”
是创建
字符串的赋值。事实上，这就是你所看到的

只需执行以下操作：
scope.test=menuData[newVal]
指令属性需要规范化为烤肉串大小写：

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



有关详细信息，请参阅


更新
由于指令使用了隔离作用域，因此指令作用域不会从父作用域继承数据。必须使用绑定定义父范围中的所有数据：

<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+"']}}";
       });*/
    }
});

app.directive（'menuDir'，function（）{
限制：'E'，
是的，
//replace:true，//已弃用replace
范围：{
菜单数据：“@”，
//添加mapData单向绑定
mapData:'假设您在指令中的某个地方有mapData（我在那里看不到），您可以尝试scope.test=mapData[newValue]；我编辑帖子以添加控制器的代码。该值位于$scope（父范围）上，不在作用域上。这会起作用，但我更愿意像一般事情一样访问控制器的作用域。因为mapData对于所有菜单目录都是相同的…当您在指令中传递
mapData
时，您通过双向数据绑定传递它（
mapData:'='
）。对于这个对象，您在指令中有相同的控制器对象。像这样，您有一个常规对象；）是的，但如果我有100个菜单元素，我将必须指示100次mapData=“mapData”然而，这是由管理所有菜单的控制器中的服务获得的一般数据。@MatteoCalvani指令属性需要规范化为
kebab case
。有关详细信息，请参阅。@georgegeawg我知道，但我以前没有看到错误。谢谢。我在代码中更正了它，错误在屏幕上保持不变。无法恢复只有一个mapData引用可应用于所有指令？这将避免每个指令上相同的mapData重复精度…硬编码和隐藏连接是不明智的。这会使应用程序更难理解、调试和维护。
<menu-dir menu-data="menu1" map-data="mapData"></menu-dir>

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

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

<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+"']}}";
       });*/
    }
});