Conditionally apply hasDropdown directive on ng-repeated element

Question

I'm working on a project where I use both angularJS and foundation, so I'm making use of the Angular Foundation project to get all the javascript parts of foundation working. I just upgraded from 0.2.2 to 0.3.1, causing a problem in the top bar directive.

Before, I could use a class has-dropdown to indicate a "top-bar" menu item that has a dropdown in it. Since the menu items are taken from a list and only some have an actual dropdown, I would use the following code:

<li ng-repeat="item in ctrl.items" class="{{item.subItems.length > 0 ? 'has-dropdown' : ''}}">

However, the latest version requires an attribute of has-dropdown instead of the class. I tried several solutions to include this attribute conditionally, but none seem to work:

<li ng-repeat="item in ctrl.items" has-dropdown="{{item.subItems.length > 0}}">

This gives me a true or false value, but in both cases the directive is actually active. Same goes for using ng-attr-has-dropdown.

this answer uses a method of conditionally applying one or the other element, one with and one without the directive attribute. That doesn't work if the same element is the one holding the ng-repeat so i can't think of any way to make that work for my code example.

this answer I do not understand. Is this applicable to me? If so, roughly how would this work? Due to the setup of the project I've written a couple of controllers and services so far but I have hardly any experience with custom directives so far.

So in short, is this possible, and how?

I found this answer, and now I think why it doesnt works for you ? http://jsfiddle.net/gleezer/sCC72/2/ it should work — Narek Mamikonyan, Sep 08 '14 at 19:50
Thanks Narek, but you didn't really read my question. My problem is a bit more complicated than that. — Stephan Muller, Sep 08 '14 at 19:56

score 1 · Answer 1 · answered Sep 08 '14 at 19:57

1

Ok, I made a directive. All <li> will need an initial attr of:

is-drop-down="{{item.subItems.length > 0}}"

Then the directive checks that value and for somereason its returning true as a string. Perhaps some onc can shed some light on that

app.directive('isDropDown', function () {
    return {
        link: function (scope, el, attrs) {
           if (attrs.isDropDown == 'true')
           {
               return el.attr('has-dropdown', true); //true or whatever this value needs to be
           }
       }
    };
});

http://jsfiddle.net/1qyxrcd3/

If you inspect test2 you will see it has a has-dropdown attribute. There is probably a cleaner solution, but this is all I know. I'm still new to angular.

edit I noticed a couple extra commas in my example json data..take note, still works, but they shouldn't be there.

answered Sep 08 '14 at 19:57

Ronnie

11,138
21
78
140

This is great, thanks! I'm still trying to work it into my application but it does seem a huge step in the right direction. I'm currently getting the following error (in browser console): "Error: [$compile:ctreq] Controller 'hasDropdown', required by directive 'topBarDropdown', can't be found!". I have the feeling this means that the hasDropdown is already required at a stage during interpreting the page before your directive has kicked in. Is that possible? And is it possible to change the timing so that it's there in time? (the attribute is visible in the DOM so that's something) – Stephan Muller Sep 08 '14 at 20:12
Where did you place the directive above? If you just copy/pasted, you have to be sure your app variable is indeed named app. `app.directive` won't work unless you have specified `var app = angular.module('YourApp',[]);` If its something like `var myAwesomeApp = angular.module(...)` then the directive would be `myAwesomeApp.directive(...)` – Ronnie Sep 08 '14 at 21:06
Hey, I'm pretty sure I placed it correctly, my app is a lot bigger/more complicated than a basic 1 js file setup, but since the attributes do appear and console logs also show at the right times I'm fairly certain it works on a basic level. I'll try to move around the include for the directive, but I think it has to do with the Angular-Foundation "topBarDropDown" directive which requires the 'hasDropdown' directive to be present.. which it is but chronologically not in the right order. – Stephan Muller Sep 09 '14 at 08:32
I just realised I'm asking the wrong question probably. I'm not conditionally applying an attribute, I'm trying to conditionally apply a directive. Your answer is the right one for the question in the title. – Stephan Muller Sep 09 '14 at 10:29
ok so the attribute `has-dropdown` will always be there? Can you give me an example of one computed condition versus the other? Not sure what you mean by conditionally apply a directive. – Ronnie Sep 09 '14 at 15:17
No your answer does exactly what it should with the `has-dropdown`, but the problem is that that's not just any attribute. It's a directive that is required for an underlying dropdown to work. Your answer perfectly adds the attribute itself to the html but it does that at a stage where Angular will not register it as being a directive anymore. Not sure if I'm making myself clear, I can't think of a better way to word it. – Stephan Muller Sep 09 '14 at 19:23
ah yeah man I get what you're saying. Angular probably doesn't parse it since its put in after. What plugin are you using so I could make a test app with whatever you're trying to do. I know I can figure it out..just need a little bit of time. Is it just this foundation thing? – Ronnie Sep 09 '14 at 19:24
is it `mm.foundation.topbar`? – Ronnie Sep 09 '14 at 19:26
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/60917/discussion-between-stephan-muller-and-ronnie). – Stephan Muller Sep 09 '14 at 19:28

score 1 · Accepted Answer · edited May 23 '17 at 11:50

As per this answer, from Angular>=1.3 you can use ngAttr to achieve this (docs):

If any expression in the interpolated string results in undefined, the attribute is removed and not added to the element.

So, for example:

<li ng-repeat="item in ctrl.items" ng-attr-has-dropdown="{{ item.subItems.length > 0 ? true : undefined }}">

angular.module('app', []).controller('testCtrl', ['$scope',
  function ($scope) {
    $scope.ctrl = {
      items: [{
        subItems: [1,2,3,4], name: 'Item 1'
      },{
        subItems: [], name: 'Item 2'
      },{
        subItems: [1,2,3,4], name: 'Item 3'
      }]
    };
  }
]);

<div ng-app="app">
  <ul ng-controller="testCtrl">
    <li ng-repeat="item in ctrl.items" ng-attr-has-dropdown="{{ item.subItems.length > 0 ? true : undefined }}">
      {{item.name}}
    </li>
  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

Thanks, this is actually a better (more canonical) answer now that it's fixed in Angular itself. — Stephan Muller, Mar 03 '15 at 10:59

Conditionally apply hasDropdown directive on ng-repeated element

2 Answers2