如何在指令内访问 angularjs 中的控制器变量？答案

【问题标题】：How to access controller variable in angularjs inside a directive?如何在指令内访问 angularjs 中的控制器变量？
【发布时间】：2019-01-26 05:34:53
【问题描述】：

我的 HTML 中有一个上传图片输入：

<div class="row">
    <div class="col-md-12">
        <div class="form-group"
            ng-class="(uploadSgnCtrl.showUploadSgnErrorMessage && uploadSgnCtrl.dataIsNullOrEmpty(uploadSgnCtrl.param)) ? 'has-error' : ''">
            <label for="signatureImage" class="required">Signature Image</label>
            <div class="input-group">
                <input type="file" id="file" name="signatureImage" 
                    class="form-control" data-file="uploadSgnCtrl.param"
                    ng-model="uploadSgnCtrl.param" file-upload>
            </div>
            <div class="row no-padding no-margin element-error-message">
                <ul class="no-padding no-margin">
                    <li ng-if="uploadSgnCtrl.dataIsNullOrEmpty(uploadSgnCtrl.param)"
                        class="no-padding no-margin">This field is Required</li>
                </ul>
            </div>
        </div>
    </div>
</div>

在我的指令中 a 有以下代码：

module.directive('fileUpload', function() {
    return {
        scope : {
            file : '=',
            accept : '=',
            showUploadSgnErrorMessage : '=' //this doesn't work
        },
        link : function(scope, el, attrs, ctrl) {
            console.log(ctrl)
            el.bind('change',
                    function(event) {
                        var files = event.target.files;
                        var file = files[0];

                        var validFormats = [ 'jpg', 'jpeg', 'png', 'JPG',
                                'JPEG', 'PNG' ];

                        var value = file.name
                        var ext = value.substr(value.lastIndexOf('.') + 1);

                        if (ext == '')
                            return;

                        if (validFormats.indexOf(ext) !== -1
                                && file.size < 2097152) {
                            scope.file = file;
                            scope.$apply();
                        } else {
                            scope.file = null;
                            console.log('file more than 2mb'); //working

                            ctrl.showUploadSgnErrorMessage = true; //not working
                            scope.showUploadSgnErrorMessage = true; //not working
                            console.log(ctrl.showUploadSgnErrorMessage); //not working
                            console.log(scope.showUploadSgnErrorMessage); //not working
                            scope.$apply();
                        }

                    });
        }
    };
});

如果我上传超过 2mb 的文件，我想要什么，它将触发“uploadSgnCtrl.showUploadSgnErrorMessage”为我的 ng-class HTML 代码中设置的 true。但上面的代码不起作用（请参阅注释代码）。虽然 console.log('file more than 2mb') 有效。我得到一个 TypeError: r is undefined 旁边。

【问题讨论】：

您实际上并未向该属性传递任何内容（即您的 <input> 缺少 show-upload-sgn-error-message=）。
事实上，它也没有传入accept 或file，尽管您似乎试图通过scope.file 传回file 值。

标签： angularjs html angularjs-directive angularjs-scope angularjs-ng-repeat

【解决方案1】：

如果您只需要访问控制器范围并获取/设置某些值，您可以使用$root：

scope.$root.showUploadSgnErrorMessage = true;

我假设您的 uploadSgnCtrl 引用是父控制器，它有一个 $scope。

【讨论】：

【解决方案2】：

首先将控制器变量绑定到指令范围，

<input type="file" id="file" name="signatureImage" 
    class="form-control" ng-model="uploadSgnCtrl.param"
    file="uploadSgnCtrl.param"
    accept=""
    show-upload-sgn-error-message="uploadSgnCtrl.showUploadSgnErrorMessage"
    file-upload>

然后使用范围变量并根据你的功能进行分配，

module.directive('fileUpload', function() {
    return {
        scope : {
            file : '=',
            accept : '=',
            showUploadSgnErrorMessage : '='
        },
        link: function() {
            ...
        }
    };
});

【讨论】：