CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangular-ui-router
Tiago
Tiago

Reputation: 4480

Dynamic ui-sref inside directive

I have created a custom directive in my Angular app which includes a couple of ui-sref links. I want this links to change according to the current state, or template being loaded:

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

My intention is to pass this information through an attribute so that the links will be generated based on the page variable, as such:

<div id="toolbar" class="col-xs-12 no-pad border-bottom">
  <ul class="nav navbar-nav no-collapse">
      <li class="no-collapse">
        <a ui-sref="admin.view({page: vm.page})" role="button"><span class="melon-icon-md melon-icon-back"></span></a>
      </li>
    <li class="no-collapse">
      <a class="toolbar-title" lang-tag="ProjectOverview">Project Overview</a>
    </li>
  </ul>
  <ul class="nav navbar-nav navbar-right force-right no-collapse">
    <li class="no-collapse">
      <a ui-sref="admin.edit({page: vm.page})" role="button"><span class="melon-icon-md melon-icon-edit"></span></a>
    </li>
  </ul>
</div>

However, a console.log of scope.page within the directive will output the exact string "vm.page" instead of the page number that I want.

Here's the directive:

(function() {
    'use strict';

    angular
        .module('melon')
        .directive('toolbarAdmin', directive);

    function directive() {
        var directive = {
            templateUrl: 'app/shared/directives/toolbar/toolbar.admin.html',
            scope: {
                page: '='
            },
            restrict: 'EA',
            replace: 'true',
            link: linkFunc,
            controller: Controller,
            controllerAs: 'vm',
            bindToController: true
        };

        return directive;

        function linkFunc(scope, el, attr, ctrl) {
            scope.page = attr.page;

            console.log(scope.page);
        }
    }

    Controller.$inject = ['$rootScope', '$scope', '$state', '$stateParams'];

    function Controller($rootScope, $scope, $state, $stateParams) {
        var vm = this;
    }
})();

How can I correctly pass the page variable to the toolbar-admin directive?

Upvotes: 0

Views: 794

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

You shouldn't be worry about the assignment of scope.page inside your directive controller as you have use page: '='. That means you enabled two way binding vm.page & directive page variable.

function linkFunc(scope, el, attr, ctrl) {
   scope.page = attr.page;
   console.log(scope.page);
}

As your linking seems overriding actually binded value by attr.page which would be vm.page. And you are reassigning that variable to scope.page

If you remove the link function will fix your issue of binding inside your directive.

Upvotes: 1

Related Questions