AngularJS 在指令中访问控制器变量-解网

问：

我有一个控制器和一个指令。我正在尝试访问指令中控制器的变量，但它似乎没有绑定。

下面是控制器的片段：

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';
        }
    };

现在这里是指令：

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);
                });
            }
        };
    }]);

下面是声明指令的元素：

 <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>

当指令首次初始化时，我得到

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

因此，我可以看到控制器示波器监视工作正常。

我想在控制器中使用“this”来引用变量，但是如何将 this 绑定到$scope以便指令可以访问变量？

angularjs 使用指令

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 的问题

下一个：Angular：函数调用作为指令的属性值

AngularJS 在指令中访问控制器变量

angularjs accessing controller variables in directive

评论