将对象传递给指令不允许全局变量

Question

Im passing to my directive a variable col defined col: '=' in the directive. The object contains some arrays, and inside those arrays there is a function. The function refers to a variable from my controller, and it looks like this:

function (params) {
    return $scope.function(params);
}

This col variable is being passed to a sub directive that the big directive contains, and the sub-directive executes it.

It throws an error, from a file called VM{random number here} where it says that $scope is undefined.

How can I make it run from my controller, and not from a virtual JS file?

Answer 1

if you need to pass functionality then you must create service/factory for the job.To use in directive or component i think.

Dont forget services are singleton and factory implements standart factory pattern.

If global means window variables or function dont need to injection just this.windows. .... does the job.

regards.

Answer 2

call your directive in your html template which you declared for your controller
and simply pass data from your directive to the function used in your controller
so that you can access your directive data on same rendering template of your controller

Directive

.directive('myDir', function () {
   return {
     'restrict': 'AE',
     'templateUrl': '/directive_page.html',
         'scope': {
           'col': '=',
           'onSelect': '='
         }
   }
   'link': function () {
       // use onselect method here to use values
   }
}

Controller

.controller('myController', function () {
    $scope.setValueFromDirective = function (value) {
       // write your logic to fetch data
    };
});

HTML

<div data-my-dir="" col="//pass value you want in directive" data-on-select='setValueFromDirective(value)'>
</div>

I hope this will help you