AngularJS Custom Directive isolated scope model binding

Question

I'm trying to implement a double select list form component just to try out angular and try to understand it better.

The functionality of this directive is that the parent model contains the list of Available Items to choose from, and contains the destination list (selected) where chosen items are placed. When an item is chosen it will be removed from the available array and placed in the selected array.

As a form may require more than one of these double select list components I don't want to rely on hard coded property names but instead allow the lists to be passed in for two way data binding.

Here is a JSBin of the code: Double Select Lists

I haven't gone any further than just trying to bind the data to the lists via the passed in model property names.

On the directive, the following scope properties are defined. The availableItems and selectedItems should both be bound to the parent controllers properties. The highlightedAvailable and highlightedSelected are to store the user selections prior to the button clicks.

 scope: { availableItems: '=', selectedItems: '=', highlightedAvailable: [], highlightedSelected: [] },

Can someone please tell me why the controller properties never bind to the directive properties?

Thanks!

aet · Accepted Answer · 2014-05-04 22:52:05Z

First, you have an error being caused by your scope:

scope: { availableItems: '=', selectedItems: '=', highlightedAvailable: [], highlightedSelected: [] },

should be:

scope: { availableItems: '=', selectedItems: '=' },

Declare the arrays somewhere else, like in the link function:

link: function (scope, element, attrs) { scope.highlightedAvailable = []; scope.highlightedSelected = [];

The next problem was the way you specified the attributes to the directive, you had:

<div ng-Select-Lists availableItems='availableItems' selectedItems='selectedItems'>

Try this instead:

<div ng-Select-Lists available-items='availableItems' selected-items='selectedItems'>

Thank you, I now see the console log the arrays out, just so I understand the answer, apart from the highlightedXYZ properties issue which I now understand. The binding issue was the hyphenated property names. Is this a rule that is systemic to Angular i.e. if I give a property a lower Camel case name it will look for hyphenated lower camel case instead?
Yes, I can't find it right this second, but there is a section in the angular docs that talks about this. Ok, here it is: docs.angularjs.org/guide/directive near the top they discuss attribute naming and the algorithm they use for name conversion.
Perfect thank you for finding that for me, I just want to understand whats going on in behind the scenes rather than just accepting it. I'll have a read through that and then move onto getting the bindings inside the template working. Thanks!

skeller88 · Accepted Answer · 2014-05-05 05:01:25Z

To expand on aet's answer, the reason that the way you specified your directive attributes in your html did not work is because HTML is case-insensitive. So the 'availableItems' attribute was actually being passed to your directive scope as 'availableitems'. On the other hand, snake cased words like 'available-items' will be converted to camel case in your angular code.

That's the reason you write angular directives in the html as 'ng-repeat', 'ng-model', and so on, but in the angular source code you'll see these directive names camel cased: 'ngRepeat', 'ngModel'...

Be super careful to use snake-case in HTML, and camel case in your Javascript (Angular)! I've spent way too long on some bugs caused by that confusion.

Collectives™ on Stack Overflow

AngularJS Custom Directive isolated scope model binding

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related