1

这是交易。我有一个页面，您只需在其中编辑用户。它有基本的输入和一切。然后我创建了一个指令来处理通过 ajax 上传图像：

angular.module('fileDirectives', [])
.directive('fileUpload', ($http, $parse)->
    scope:
        fileUpload: "="
    link: (scope, element, attrs)->
        if attrs.postUrl
            element.bind 'change', ->
                if this.files.length > 0
                    form = new FormData()
                    form.append 'files[]', file for file in this.files
                    req = new XMLHttpRequest()
                    req.open 'POST', attrs.postUrl, true
                    req.onreadystatechange = =>
                      if req.readyState is 4
                        if req.status is 200
                            response = JSON.parse req.responseText
                            notarray = attrs.notArray is "true"
                            if notarray
                                response = response[0]
                            scope.fileUpload = response
                            scope.$apply()
                    req.send form

该指令的使用方式如下：

<input type="file" file-upload="member.image" post-url='/members/images' not-array="true"/>

一切正常，但我希望用户的图像在它自己的组件中，所以我创建了一个这样的指令：

<member-img member='member' ></member-img>

它使用成员的名称和图像来显示图形。如果它有帮助，这是该指令：

    ).directive('memberImg', ()->
    scope:
        member: "="
    restrict: "E"
    templateUrl: 'partials/member-image.html'
    link: (scope, element, attrs)->
        failed = false
        setImage = ->
            scope.image = if scope.member.image and scope.member.image isnt '' and not failed
                scope.member.image
            else
                "default.gif"
        setImage()
        scope.$watch 'member.image', ->
            failed = false
            setImage()
        element.find('img').bind 'error', ()->
            scope.$apply ->
                failed = true
                setImage()
)

无论如何，由于某种原因，将其放入它自己的目录中，图像只有 50% 的时间被上传。更奇怪的是，在我的 fileUpload 指令中，如果我调用 $apply 两次，它每次都有效：

.directive('fileUpload', ($http, $parse)->
    scope:
        fileUpload: "="
    link: (scope, element, attrs)->
        if attrs.postUrl
            element.bind 'change', ->
                if this.files.length > 0
                    form = new FormData()
                    form.append 'files[]', file for file in this.files
                    req = new XMLHttpRequest()
                    req.open 'POST', attrs.postUrl, true
                    req.onreadystatechange = =>
                      if req.readyState is 4
                        if req.status is 200
                            response = JSON.parse req.responseText
                            notarray = attrs.notArray is "true"
                            if notarray
                                response = response[0]
                            scope.fileUpload = response
                            scope.$apply()
                            scope.$apply() # For some reason I have to call this twice.
                    req.send form
        else
            throw "fileUpload requires post-url attribute!"

我认为可能发生的情况是，在第一次应用时，它通知父范围 member.image 应该更改，然后在第二次应用时，父范围通知另一个孩子成员应该更改。但是，我知道这不是预期的行为。您可以就该主题发表的任何见解将不胜感激。

4

0 回答 0