2

私は簡単なことをしようとしています - ディレクティブのモデルをサービスのデータにバインドします。そして、サービスのデータが ($timeout または $http リクエストによって) 非同期にロードされる前に、ディレクティブのモデルを更新しません。

実際の例http://codepen.io/snater/pen/IjvFa

そしてソース：

<div ng-app="asyncServiceTest" ng-controller="testController">
    <bind-to-service></bind-to-service>
</div>

app = angular.module "asyncServiceTest", []

app.directive "bindToService", ["dataService", (dataService) ->
    restrict: "E"
    scope: {}
    template: "<div>{{ test }}</div>"
    link: (scope) ->
        scope.test = dataService.test
]

app.factory "asyncService", ["dataService", "$timeout", (dataService, $timeout) ->
    load: ->
        dataService.test = "SYNC DATA!"  # Works fine

        $timeout ->
            dataService.test = "ASYNC DATA!" # Doesn't work ((
        , 2000
]

app.factory "dataService", ->
    test: "Init Data"

app.controller "testController", ["$scope", "asyncService", ($scope, asyncService) ->
    asyncService.load()
]

asyncService の $rootScope で $apply を呼び出しても機能しません。期待どおりですが、試してみました。

4

2 に答える 2

2

.JavaScript のプロトタイプ的な性質のため、バインディングを行うときは表記法を使用する必要があります。ライブサンプルを更新しました。

http://codepen.io/anon/pen/jverH

基本的に私はサービスをに変更しました

app.factory "dataService", ->
    test: {data:"Init Data"}

およびその他の対応する変更を行いました。

基本的にあなたがしたとき

scope.test = dataService.test;

スコープtest値を文字列に割り当てただけです。ただし、dataServicetest文字列への変更は期待どおりに反映されません。プログラミング用語では、値渡しのようなものです。

スコープのプロトタイプの継承とその仕組みについて読んで、あなたが行ったことがうまくいかない理由を理解してください。

于 2013-11-06T09:03:21.633 に答える