Pass Javascript Variable into Directive parameters

Question

I have a Javascript variable which I want to pass via an Element Directive. I was doing it with the help of ng-init but my client told me it will cause problem in their ServiceNow setup so I have to do it via directive parameters.

I'm getting error whenever I m trying. Here's my code:

APP.JS

//directive decleration 
app.directive('myDirective', function(){
  var directive = {};
  directive.restrict = 'E';
  directive.scope = {
    myParam: '='
  }; 
  directive.template = '<div>{{myParam}}</div>';
  return directive;
}) ;

HTML

<script>
var temporary_var = 'Helloworld';
</script>
<div ng-controller="progressController">
<my-directive my-param="temporary_var"></my-directive>
</div>

So as you can see I have just passed a normal string right now, but I will be passing array or objects via this directive parameter. It is just an example. And I have tried passing Array and objects also, but No Luck.

K K · Accepted Answer · 2019-07-29 07:47:20Z

1

Try this:

<script>
  var temporary_var = 'Helloworld';

</script>
<div ng-controller="progressController">
  <my-directive my-param="param"></my-directive>
</div>

 angular.module('components', []).directive('myDirective', function() {
    return {
      restrict: 'E',
      scope: {
        myParam: '='
      },
      template: '<div>Hi {{myParam}}</div>'
     }
 });
    angular.module('myApp', ['components']).controller('progressController', ['$scope', '$window',             function($scope, $window) {
       $scope.param = $window.temporary_var; //This is the key
   }]);

Demo: https://jsfiddle.net/lotusgodkk/26gnybqf/1/

answered Jul 29, 2019 at 7:47

K K

18.2k4 gold badges33 silver badges39 bronze badges

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

1 Comment

Anup Kumar Gupta Over a year ago

Okay, So basically I have to use $window for it. Thanks

Collectives™ on Stack Overflow

Pass Javascript Variable into Directive parameters

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