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

Code is like this:

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

Directive:

angular.module("vtApp.directives").
directive('multirangeslider', function ($parse, $timeout, $pile) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            values: "=",
            options: "=",
            variances: "&" 
        },
        pile: 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

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

Code is like this:

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

Directive:

angular.module("vtApp.directives").
directive('multirangeslider', function ($parse, $timeout, $pile) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            values: "=",
            options: "=",
            variances: "&" 
        },
        pile: 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

• javascript
• angularjs-directive
• piler-directives

1 Answer 1

You will not have access to the scope until the LinkingFunction which is returned by your pile function. The pile function creates the html template. The scope is then bined 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 pile function. Somethig like this:

angular.module("vtApp.directives").
  directive('multirangeslider', function ($parse, $timeout, $pile) {
    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./angular/angular.js/wiki/Understanding-Directives