angularjs accessing controller variables in directive

Question

I have a controller and a directive. I'm trying to access the controller's variables in the directive but it doesn't seem to be binding.

here is a snippet of the controller:

myapp.controller('AddDatasetModalController', ['$rootScope', '$scope', '$uibModalInstance', 'webServices', function ($rootScope, $scope, $uibModalInstance, webServices) {
    var addDatasetModalCtrl = this;
    this.selectedFileSourcetype = '';
    this.formClass = '';
    this.datasetImportSourceTypes = [{'name': 'file', 'val': 'File', 'selected': false}, {'name': 'jdbc', 'val': 'Database', 'selected': false}, {'name': 'url', 'val': 'URL', 'selected': false}];

    $scope.$watch(function () {
        return addDatasetModalCtrl.selectedFileSourcetype;
    }, function () {
        console.log('from controller selected file source type: ' + addDatasetModalCtrl.selectedFileSourcetype);
    });
    this.fileSourceTypeItemChanged = function () {
        if (addDatasetModalCtrl.selectedFileSourcetype === 'File') {
            addDatasetModalCtrl.formClass = 'dropzone';
        }
    };

now here is the directive:

myapp.directive('conditionalDropzone', ['$parse', function ($parse) {
        return {
            restrict: 'A',
            link: function (scope, el, attrs) {
                scope.$watch(function () {
                    return scope.selectedFileSourcetype;
                }, function () {
                    console.log('scope.selectedFileSourcetype : ' + scope.selectedFileSourcetype);
                });
            }
        };
    }]);

Here is the element where the directive is being declared:

 <div class="form-group">
                    <label for="importDataSourceType">Source type:</label>
                    <select class="form-control" id="importDataSourceType" ng-model="addDatasetModalCtrl.selectedFileSourcetype"  ng-change="addDatasetModalCtrl.fileSourceTypeItemChanged()">
                        <option ng-repeat="importSourceType in addDatasetModalCtrl.datasetImportSourceTypes" >{{importSourceType.val}}</option>
                    </select>
                </div>

When the directive is first initialized I'm getting

from controller selected file source type: 
scope.selectedFileSourcetype : undefined
from controller selected file source type: File

So I can see that the controller scope watch works.

I want to use 'this' in the controller to refer to variables but how can I bind the this to the $scope so the directive can access the variables?

Possible duplicate of [Access controller scope from directive](http://stackoverflow.com/questions/19385543/access-controller-scope-from-directive) — ZEE, Aug 02 '16 at 21:14
no - slightly different scenario - I have a simpler situation, I have found the problem though. — alessandro ferrucci, Aug 02 '16 at 21:16

score 0 · Answer 1 · answered Aug 02 '16 at 21:17

I have found the issue, I needed this in the directive

scope.addDatasetModalCtrl.selectedFileSourcetype

myapp.directive('conditionalDropzone', ['$parse', function ($parse) {
        return {
            restrict: 'A',
            link: function (scope, el, attrs) {
                scope.$watch(function () {
                    return scope.addDatasetModalCtrl.selectedFileSourcetype;
                }, function () {
                    console.log('scope.selectedFileSourcetype : ' + scope.addDatasetModalCtrl.selectedFileSourcetype);
                });
            }
        };
    }]);

angularjs accessing controller variables in directive

1 Answers1