Dynamic ui-sref inside directive

Question

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?

Pankaj Parkar · Accepted Answer · 2015-08-08 21:10:04Z

1

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.

answered Aug 8, 2015 at 21:10

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Collectives™ on Stack Overflow

Dynamic ui-sref inside directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related