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

时间:2016-08-02 21:12:05

标签: angularjs using-directives

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

这是控制器的片段:

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

所以我可以看到控制器示波器手表有效。

我想用这个&#39;在控制器中引用变量,但如何将其绑定到$ scope,以便指令可以访问变量?

1 个答案:

答案 0 :(得分:0)

我发现了这个问题,我在指令

中需要这个

<强> 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);
                });
            }
        };
    }]);
相关问题