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值分配给了一个字符串。但是对 dataService 字符串的任何更改test都不会按预期反映。在编程术语中，它类似于按值传递。

阅读范围原型继承以及它是如何工作的，以了解您所做的事情为什么不起作用。

于 2013-11-06T09:03:21.633 回答
1

您的代码的主要问题是您试图在使用异步方法更改数据时更改测试对象的直接引用。这会导致问题，因为您将测试对象“REFERENCE”与指令的模型绑定，因此您不应更改它以使数据绑定有效。如果更改引用，则绑定将丢失。

因此，将您的数据保存在测试对象的属性中，例如“test.value”，并更改值而不是测试引用。

这是更新的代码：

app = angular.module "asyncServiceTest", []

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

]

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

        $timeout ->
            dataService.test.value = "ASYNC DATA!"
        , 2000
]

app.factory "dataService", ->
    test: {value:""};

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

这是更新的链接：

http://codepen.io/kalyansriram/pen/BCmla

于 2013-11-06T09:11:44.043 回答