javascript - 自定义指令中的 ngRepeat - 插值

Question

正在创建自定义指令来填充下拉菜单，但在尝试设置 ng-repeat 时遇到问题<li> 的属性在我的指令中。

我希望这能为我的工具的每个环境创建一个下拉选项，使用 ng-repeat .

我在控制台中没有收到任何错误，但 $scope变量未按预期进行插值。

这是我的指令:

myApp.directive("toolsMenu", function () {
   return {
       replace: true,
       transclude: true,
       templateUrl: 'js/directives/toolsMenu.html',
       scope: {
           inputObject: '=',
           environment: '=',
           tool: '@'
       }
   } 
});

这是 toolsMenu.html 文件:

<li class="tool">{{inputObject.name}}
    <ul class="environment">
       <li ng-repeat="environment in {{tool}}"><a ng-href="{{ environment.url }}" alt="{{inputObject.name}} {{ environment.environment }}" target="_blank">{{ environment.environment }}</a></li>
    </ul>
</li>

这就是我在主 HTML 文件中调用指令的方式:

<tools-menu input-object="continuusInput" environment="continuus" tool="continuus"></tools-menu>

这是运行页面时打开的控制台输出:

在此示例中，“工具”实际上应该是“连续”，但它仅显示为“工具”。

Answer 1

尝试

<li ng-repeat="environment in tool"><a ng-href="environment.url" alt="{{inputObject.name + environment.environment}}" target="_blank">{{ environment.environment }}</a></li>

在 html 上定义属性时不需要添加括号 ({{}})