CODEWITHSUNDEEP
angularjsangularjs-directive
user8055142
user8055142

Reputation: 1

Passing variables to directive

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?

Upvotes: 0

Views: 1170

Answers (1)

Hadi
Hadi

Reputation: 17289

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: '@'
    },

Upvotes: 1

Related Questions