Question

我正在尝试做一些简单的事情 - 将bind指令的模型用于服务的数据。在服务的数据加载异步（通过$ timeout或$ http请求）之前，它只是不更新指令的模型。

来源：

<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上调用$ apply on $ rootScope不起作用，这是预期的，但我已经尝试过。

Answer 1

由于javascript的原型特性，您在进行绑定时应使用.表示法。我已经更新了实例。

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

基本上我将服务改为

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

并做了其他相应的更改。

基本上当你做到了

scope.test = dataService.test;

您刚刚将范围test值分配给字符串。但是对dataService test字符串的任何更改都不会按预期反映出来。在编程术语中，它就像传递值一样。

了解scope prototypal inheritance以及它如何运作，以了解为什么你所做的不起作用。

Answer 2

代码的主要问题是，当使用异步方法更改数据时，您尝试更改测试对象的直接引用。这会导致问题，因为您将测试对象“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

如何将指令模型绑定到异步服务数据

2 个答案: