ngRepeat in custom directive - interpolation

Question

Working on creating a custom directive to populate a drop-down menu, but am facing problems when trying to set the ng-repeat attribute of the <li> in my directive.

I am expecting this to create a drop down option for each environment of my tool, using ng-repeat .

I am not getting any errors in the console, but the $scope variable is not being interpolated as expected.

Here is my directive:

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

Here is the toolsMenu.html file:

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

This is how I call my directive form the main HTML file:

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

This is the console output open running the page:

In this example, the "tool" is actually supposed to be 'continuus', but it is only appearing as 'tool'.

Answer 1

Try

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

You don't need to add brackets ({{}}) when defining attributes on html