CODEWITHSUNDEEP
javascriptangularjs
Anup Kumar Gupta
Anup Kumar Gupta

Reputation: 3

Pass Javascript Variable into Directive parameters

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.

Upvotes: 0

Views: 240

Answers (1)

K K
K K

Reputation: 18099

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/

Upvotes: 1

Related Questions