CODEWITHSUNDEEP
javascriptangularjs
ray abu
ray abu

Reputation: 143

Nested Directives not showing. AngularJS

I am creating a menu, where depending on the view, it will display the correct links. So from the code below, when the parent scope startCtrl, $scope.viewActions value changes it will be used to select the correct menu template, which will be display on the menu sidebar.

The issue, I'm having is that my nested directives template isn't been shown on the mobile-side-bar directive. Further I'm getting a:

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{playerSearchSpinnerOn}}] starting at [{playerSearchSpinnerOn}}]

when trying to bind this scope.playerSearchSpinnerOn, which is a child scope to 'startCtrl' to my 

  <advertise-game playersearchspinneron={{playerSearchSpinnerOn}}></advertise-game>

Scope Hierarchy:

StartCtrl( root controller)

Then nested directives of mobile-side-bar directive

Code

StartCtrl

  monopolyMenuModule.controller('StartCtrl', ['$scope', 'startMenuServices','startMenuHeaderBar', function ($scope, services,startMenuHeaderBar,viewNamesEnum) {
    $scope.viewActions = "";

 }]);

AddUsersCtrl

monopolyMenuModule.controller('AddUsersCtrl', ['$scope', 'addUserServices', 'GameGroupDetails', 'viewNamesEnum', function ($scope, service, GameGroupDetails, viewNamesEnum) {

     // add code to call notifyUsers object.. watch pluralsight "connecting our server to client" and "how signalr works"
     $scope.playerSearchSpinnerOn = false;

     $scope.$parent.viewActions = "addUsers.html";
}]);

MobileSideBar directive

monopolyMenuModule.directive('mobileSideBar', function () {
    return {
        restrict: "E",
        transclude: true,
        scope: {

        },
        controller: function ($scope, menuService) {
            // code here
        },
        templateUrl: '/Js/MonopolyMenu/mobileSideBar.html'
    }
});

advertise-game directive

monopolyMenuModule.directive('advertiseGame', ['GameGroupDetails', function (GameGroupDetails) {
    return {
        restrict: "E",
        scope: {
            playerSearchSpinnerOn: "=",
        },
        template: "<div ng-click='advertiseGame()>Advertise Game</div>",
        controller: function ($scope) {
            $scope.advertiseGame = function () {
                if (GameGroupDetails != null) {
                    service.FindUsers(GameGroupDetails).done(function () {
                        // add spinner once group has been show in invite screen
                        // apply is needed and apply is only called in angularjs directives
                        $scope.$apply(function () {
                            $scope.playersearchspinneron = true;
                        });

                    });
                }
            };
        }
    }
}]);

Html

<div id="mainContainer" ng-controller="StartCtrl">

<div id="menuContainer">
    <mobile-side-bar id="menu" class="hideElement">
        <div ng-include src="viewActions"></div>
    </mobile-side-bar>

</div>

// AddUsers.html comes from $routeProvider and binding addUsersCtrl 
<div ng-view class="view-animate"></div>  

</div>


<script type="text/ng-template" id="addUsers.html">
  <advertise-game player-search-spinner-on="playerSearchSpinnerOn">  </advertise-game>
  <invite-friend></invite-friend>
  <player-search></player-search>
</script>

How do I get advertise-game, and my other nested directive to show their template inside the mobile-side-bar directive?

Upvotes: 0

Views: 321

Answers (1)

Chris
Chris

Reputation: 7288

To pass the value from the parent controller to the nested directive with '=', you don't use interpolation. See the answer to this question.

Also, be careful with the switch between camel and hyphen case. Typically variables in js use camel, while html attributes use hyphen.

I recommend changing your directive invocation to:

<advertise-game player-search-spinner-on="playerSearchSpinnerOn"></advertise-game>

And the directive definition should have camel case in the scope argument.

scope: {
    playerSearchSpinnerOn: '='
}

Upvotes: 1

Related Questions