javascript - How to access scope from compiler function directive? -
i have directive building html based on array sent attribute. can't access compiler function of directive. works inside link function, need in inside compile, otherwise new template doesn't compiled.
code 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 undefined values = eval (attrs.variances) //returns string "ranges" values = ??? ///what should put here? htmltext = '<div></div>'; element.replacewith(htmltext); return function (scope, element, attrs){ } } } });
thank
you not have access scope until linkingfunction returned compile function. compile function creates html template. scope combined template during linkingfunction.
i'm not sure trying use standard template or templateurl object on linking function opposed diving down compile function. somethig 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 how directives constructed: https://github.com/angular/angular.js/wiki/understanding-directives
Comments
Post a Comment