How to access scope from compiler function directive?

Question

I have a directive building html based on an array sent as attribute. I can't access it from the compiler function of the directive. It works inside the link function, but I need in inside the compile, otherwise new template doesn't get compiled.

Code is like this:

<multirangeslider values="ranges" variances="['Master', 'master A', 'master B']"></multirangeslider>

Directive:

angular.module("vtApp.directives").
directive('multirangeslider', function ($parse, $timeout, $compile) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            values: "=",
            options: "=",
            variances: "&" 
        },
        compile: function (element, attrs) {
            var htmlText, variances, values;
            variances = eval(attrs.variances);

            values = scope.ranges //scope is undefined
            values = eval (attrs.variances) //returns string "ranges"
            values = ???  ///what should I put here?

            htmlText = '<div></div>';
            element.replaceWith(htmlText);
            return function (scope, element, attrs){

            }
        }
    }
});

Thank

bennick · Accepted Answer · 2013-05-06T17:53:53.323

You will not have access to the scope until the LinkingFunction which is returned by your compile function. The compile function creates the html template. The scope is then combined with the template during the LinkingFunction.

I'm not exactly sure what you are trying to do but I would use the standard template or templateUrl object on the linking function as opposed to diving down into the compile function. Somethig like this:

angular.module("vtApp.directives").
  directive('multirangeslider', function ($parse, $timeout, $compile) {
    return {
      restrict: 'E',
      replace: true,
      template: "<div ng-repeat='val in values'>{{val}}</div>", //Your template code
      scope: {
        values: "=",
        options: "=",
        variances: "&" 
      },
      link: function (scope, element, attrs) {
        scope.values = eval(attrs.variances)
      }
    }
  });

You can find more info here about how directives are constructed: https://github.com/angular/angular.js/wiki/Understanding-Directives

How to access scope from compiler function directive?

1 Answers1