Boolean value not being passed in Angular

Question

I'm trying to do something relatively simple here, pass in the boolean variable multiExpandable down a recursive tree created by my directive. The variable is later evaluated by my service. In my service it keeps coming back as undefined for whatever reason.

I have no idea why this is doing this to me! The application variable takes in string object and does, literally, the same thing and is absolutely fine. My code is below, note that a lot of it has been trimmed to simply show you what is important. Why is this happening?

My directive:

.directive("navigation", function() {
          return {
                restrict: 'E',
                replace: true,
                scope: {
                    menu: '=',
                    multiExpandable: '=',
                    application: '=',
                },
                controller: function($scope) {
                    $scope.toggleExpand = NavigationService.toggleExpand;
                },

              ...

            }

my template:

<ul style="list-style: none">
<li ng-repeat="node in menu.Folders">
    {{multiExpandable}}
    <i class="fa" ng-click="toggleExpand(node, application, menu, multiExpandable)"></i>
    <navigation menu="node" application="application" multiExpandable="multiExpandable"    ng-show="node.expanded == true"></navigation>
</li>
</ul>

where the directive is called:

<navigation class="nav tree" menu="applications[currentApplication].Menu" application="currentApplication" multiExpandable="expandable"></navigation>

And the value in the service (the console log statement is returning it as undefined):

_toggleExpand = function (application, multiExpandable) {

                    //some code

                    console.log("in TOGGLE EXPAND - multiExpandable:");
                    console.log(multiExpandable);

                    //some code
 }

Answer 1

Your directive attribute declaration is camelCase and therefore you need a dash in the HTML like this:

multi-Expandable="multiExpandable"

Note that angular:

• Strip x- and data- from the front of the HTML element/attributes, and
• Converts the HTML attributes with : , - , or _ -delimited name to camelCase.

You can read more about it here:

https://docs.angularjs.org/guide/directive