How to make ui-router working inside custom Angularjs directive

Question

I'm trying to create navigation tree for my application using custom directive for it. For now I have the following in my directive (minified):

(function() {
  'use strict';

  angular
    .module('app.layout')
    .directive('cnNavTree', ['$log', '$state', cnNavTree]);

  function cnNavTree($log, $state) {
      var directive = {
        link: link,
        restrict: 'EA',
        templateUrl: 'app/layout/cn-nav-tree.html'
      };
      return directive;

    function link(scope, element, attrs) {
      scope.$on('stateChange', function (event, toState, fromState) {
        updateNavTree(event, toState, fromState)
      });

      function updateNavTree(event, toState, fromState) {
        element.html('<span class="color" ui-sref="app.twoWays">Report load</span>');
      }
    }
  }
})();

Everything is OK except ui-sref in element.html, it's not working and I cant go to app.twoWays state. Any ideas, how can we solve the problem?

Thanks in advance

It would be easier to help if you provided a reproducible example — Maria Ines Parnisari
– Maria Ines Parnisari, Commented Apr 29, 2017 at 18:26
'$stateChangeStart' not 'stateChange', and read about $state.get to generate the url from the code — Alon Eitan
– Alon Eitan, Commented Apr 29, 2017 at 18:29
@AlonEitan, it's not $rootScope.$on('$stateChangeStart', ..., it's my custom $scope.$broadcast(...) — P.S.
– P.S., Commented Apr 29, 2017 at 18:32
You can't manually insert directives without using $compile() so angular is aware of them and actually compiles them — charlietfl
– charlietfl, Commented Apr 29, 2017 at 18:54

Pankaj Parkar · Accepted Answer · 2017-04-29 18:55:29Z

1

As there are angular binding available on DOM. You have to compile the HTML element with current scope, before injected that DOM inside DOM tree.

//inject $compile before using it.
var compiledDOM = $compile('<span class="color" ui-sref="app.twoWays">Report load</span>')($scope);
element.append(compiledDOM);

edited Apr 29, 2017 at 18:55

answered Apr 29, 2017 at 18:54

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

1 Comment

P.S. Over a year ago

I'll try it in few minutes

Collectives™ on Stack Overflow

How to make ui-router working inside custom Angularjs 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