Passing variables to directive

Question

I'm hoping someone can help me get my head around passing a variable into a directive. I've looked at other answers to what seem like similar questions to mine, but none seem to apply directly and/or I don't understand them.

So, my problem is that I have a toolbar that I want to be able to have access to variables found in different controllers. Not sure if this is even possible.

This is my directive (the scope and link options are all wrong, so they are here just for show):

.directive('toolbar', function(){
    return {
        restrict: 'E',
        scope: {
            page: '='
        },
        templateUrl: '/templates/toolbar.html',
        link: function(scope, elem, attrs) {
            scope.page = vm.page;
        },
        replace: false
    };
})

I want to use it once in index.html, like this:

<body ng-app="app" ng-cloak layout="column">
    <div layout-align="center center" layout-margin flex="50">
        <img src="/images/logo.png" class="logo">
    </div>

    <toolbar page="{{vm.page}}"></toolbar>
    <md-content>
        <div ui-view ng-view></div>
    </md-content>
</body>

where vm.page is a variable found in the controller that drives the ui-view, which is set up like this...

angular
    .module('app')
    .controller('dogsCtrl', function(dogsFactory, sessionService, 
        searchService, locationService, adoptableService, toastService, 
        errorHandlerService, $document, $mdSidenav, $scope, $state, $q) {

        var vm = this;
        vm.page = 'Home';
        vm.currentUser = sessionService.getUser(); ....

I need to be able to access vm.page and the vm.currentUser object in a sub-directive on the toolbar. The toolbar template looks like this:

<md-toolbar class="md-menu-toolbar" hide show-gt-xs>
<div layout="row" layout-align="space-between center">
    <div class="page-title" flex hide show-gt-md>
            {{ vm.page }}
    </div>
    <div class="main-menu">
        <md-menu-bar>
            <menu></menu>
        </md-menu-bar>        
    </div>

    <md-input-container class="search">
        <md-select name='breed' ng-model="breed._id" placeholder="Select a breed" ng-change="vm.getDogDetail(breed._id)">
            <md-option value="{{breed._id}}" ng-repeat="breed in vm.dbBreeds"> {{ breed.breed }}</md-option>
        </md-select>
    </md-input-container>
</div>

As it stands now, I have to repeat the toolbar directive on every page, but I would rather not do it that way. Is this possible?

Hadi · Accepted Answer · 2017-05-23 18:20:42Z

1

It should be like this

<toolbar page="vm.page"></toolbar>

because the page is two way binding.

OR

change the page scope type to this

 restrict: 'E',
    scope: {
        page: '@'
    },

answered May 23, 2017 at 18:20

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user8055142 Over a year ago

Thanks for responding, but what I get when I do that is just the string 'vm.page' and not what I want it to be (the title of the page). I want to be able to pass it the title for each page (which is driven by different controllers).

Collectives™ on Stack Overflow

Passing variables to directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related