how can i get the var at outside ng-flow scope which inside ng-flow scope?

[LuciferZhang]

why i can not get {{myCroppedImage}} outside ng-flow scope? and how can i get the var at outside ng-flow scope which inside ng-flow scope? anyone else has the same question?

                   <div class="col-sm-4"                             
                         flow-init="{singleFile:true, target:'/upload'}"
                         flow-file-added="(!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]) && addLogoFile($file, $event, $flow)"
                         flow-file-success="$file.msg = $message">

                        <div class="thumbnail cropArea" ng-show="$flow.files.length">
                            <img-crop
                                    image="cropImg"
                                    result-image="myCroppedImage"
                                    area-type="square"
                                    result-image-size="100"
                                    area-min-size="80"></img-crop>
                        </div>

                        <span class="btn btn-primary" ng-hide="$flow.files.length"
                              flow-attrs="{accept:'image/*'}" flow-btn>选择图片</span>
                        <span class="btn btn-primary" ng-show="$flow.files.length" flow-btn
                              flow-attrs="{accept:'image/*'}">重新选择</span>
                        <span class="btn btn-danger" ng-show="$flow.files.length"
                              ng-click="clearImg($flow)">移除</span>
                        <span class="btn btn-info" ng-show="$flow.files.length"
                              ng-click="uploadLogoImg(myCroppedImage)">上传图片</span>

                        <div class="clearfix margin-top-10">
                            <span class="label label-danger">NOTE!</span>
                            上传照片不能超过1M
                        </div>
                    </div>
                    <div class="col-sm-5" ng-if="$flow.files.length">
                        <p class="preview-p">预览</p>

                        <div>
                            <img ng-src="{{myCroppedImage}}"/>
                        </div>
                    </div>

[octavius37]

I just now have encountered a similar problem. Apparently within a flow div, the scope is isolated. The only way you can get to the image(or any other $scope variable) is to pass it to a function and handle it over there.

[richfergus]

+1

[evilaliv3]

have any of you identified the issues and want to propose a patch?

[octavius37]

Well instead of creating a child scope(which inherits from the parent but won't allow two-way binding) in the flow-init directive, you could create an isolate scope where a flow object is defined with =. That way you could expose the flow object to the parent scope. Like so: .directive('flowInit', [function() { return { scope: { $flow: '=' }, controller: 'flowCtrl' }; }]);

This way, the user can have access to the flow object and name it however they want, and because it is isolated, it will still work with multiple directives on the same page.

Usage would be: <div flow-init $flow="my-flow-object">

and if you wanted to view the image before uploading it, like OP, you would do: <img flow-img $flow='my-flow-object'>

You would need to alter the flow-img directive as well.

I'm not sure if this will cause any conflict and I'm currently not able to actively help, but this would be the way to handle multiple directives without contaminating the scope and still make the flow objects available outside of flow-init, which apparently is sometimes needed.