javascript - Angular ディレクティブ: $apply を 2 回呼び出す必要がありますか?

Question

これが取引です。ユーザーを編集するだけのページがあります。基本的な入力とすべてがあります。次に、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 を 2 回呼び出すと、毎回動作することです。

.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 を変更する必要があることを親スコープに通知し、次に 2 番目の適用時に親スコープがメンバーを変更する必要があることを他の子に通知している可能性があると思います。ただし、これが意図した動作ではないことはわかっています。この件について何か光を当てていただければ幸いです。