自定义指令中的孤立范围

debugcn 发表于 Dev

阿杰说：

嗨，我是自定义指令中隔离范围的新手

这是我的指令

restrict: 'E',
        scope: {},
        template: '<input type="file" ng-model="myFile" />{{myFile.name}}',
        link: function(scope, element, attrs, sharedServices) {
            var model = $parse(attrs.fileBrowser);
            var modelSetter = model.assign;
            element.bind("change", function(e) {
            scope.fileForImagepreview = (e.srcElement || e.target).files[0];

            if (scope.fileForImagepreview.type === "image/jpeg" ||
                scope.fileForImagepreview.type === "image/jpg" ||
                scope.fileForImagepreview.type === "image/png") {
                scope.$apply(function() {
                    modelSetter(scope, element[0].firstChild.files[0]);
                });
            }

            var promise = fileReader.readAsDataURL(scope.fileForImagepreview, scope);
            promise.then(function(result) {
                scope.imageSrcForPreview = result;
            });
        });
       }

在HTML中，我只是将其作为

<file-browser></file-browser>

我想要文件在指令范围内

阿杰说：

创建一个像这样的数组

scope.imageSrcForPreview = [];

并将对象插入数组，所以我的函数看起来像

var promise = fileReader.readAsDataURL(scope.fileForImagepreview, scope);
                promise.then(function(result) {
                    scope.imageSrcForPreview.splice(index, 1, result);
                    scope.showPreview = true;
                });

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。