处理数据AngularJS服务绑定 [英] Handling data binding in AngularJS Services

问题描述

我试图找出如何妥善处理结合时，我的数据存储在一个服务。

我能得到的东西，如果它把服务到$范围的工作，然后让模板直接绑定到它，但是这似乎是一个非常糟糕的主意。

我基本上想拥有它使我的看法/控制器都能够很容易地改变状态下的服务，并有处处体现。

这感觉就像我应该能够像做以下，但它不工作（http://jsfiddle.net/aidankane/AtRVD/1/）。

HTML

 ＆LT; D​​IV NG控制器=MyCtl＆GT;
    ＆LT;选择NG模型=绘图NG选项=d.file在图纸D＆GT;＆LT; /选择＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV NG控制器=MyOtherCtl＆GT;
    {{ 画画 }}
＆LT; / DIV＆GT;
 

JS

  VAR对myApp = angular.module（'对myApp'，[]）;myApp.factory（'为myService'，函数（）{
    VAR我= {
        图中：{'文件'：'A'}，{'文件'：'B'}]
    };
    //选定的绘图
    me.drawing = me.drawings [0];
    还给我;
}）;功能MyCtl（$范围，为myService）{
    // 可以做：
    // $ scope.mys =为myService;
    //然后在HTML NG-模式=mys.drawing
    //但似乎是错误的    $ scope.drawings = myService.drawings;
    $ scope.drawing = myService.drawing;    //我不能这样做呢？它似乎不反正工作...
    $范围。$腕表（'图纸'，功能（图）{
        myService.drawing =图;
    }）;
}功能MyOtherCtl（$范围，为myService）{
    $ scope.drawing = myService.drawing;
}。MyCtl $注射='$范围'，'为myService'];
。MyOtherCtl $注射='$范围'，'为myService'];
 

解决方案

您可以使用 $观看并传递一个函数绑定到服务：

$ $范围手表（函数（）{返回myService.drawing;}，功能（图）{
  //这里处理。例如。：
  $ scope.drawing =图;
}）;


然后用 $ scope.drawing 在模板中，它们会自动更新：

＆LT; D​​IV NG控制器=MyOtherCtl＆GT;
  {{ 画画 }}
＆LT; / DIV＆GT;


I'm trying to figure out how you handle binding properly when my data is stored in a service.

I can get things working if it put the service into the $scope and then get the templates to bind directly into it but that seems like a really bad idea.

I'd basically like to have it so that my views / controllers are able to easily change the state down in a service and have that reflected everywhere.

It feels like I should be able to do something like the following, but it doesn't work (http://jsfiddle.net/aidankane/AtRVD/1/).

HTML

<div ng-controller="MyCtl">
    <select ng-model="drawing" ng-options="d.file for d in drawings"></select>
</div>
<div ng-controller="MyOtherCtl">
    {{ drawing }}
</div>

JS

var myApp = angular.module('myApp', []);

myApp.factory('myService', function(){
    var me = {
        drawings: [{'file':'a'}, {'file':'b'}]
    };
    // selected drawing
    me.drawing = me.drawings[0];
    return me;
});

function MyCtl($scope, myService){
    // can do:
    // $scope.mys = myService;
    // and then in html ng-model="mys.drawing"
    // but that seems wrong

    $scope.drawings = myService.drawings;
    $scope.drawing = myService.drawing;

    // can I not do this? it doesn't seem to work anyway...
    $scope.$watch('drawing', function(drawing){
        myService.drawing = drawing;
    });
}

function MyOtherCtl($scope, myService){
    $scope.drawing = myService.drawing;
}

MyCtl.$inject = ['$scope', 'myService'];
MyOtherCtl.$inject = ['$scope', 'myService'];

解决方案

You can bind to services using $watch and passing a function:

$scope.$watch( function () { return myService.drawing; }, function ( drawing ) {
  // handle it here. e.g.:
  $scope.drawing = drawing;
});

And then use $scope.drawing in your templates and they will automatically update:

<div ng-controller="MyOtherCtl">
  {{ drawing }}
</div>

这篇关于处理数据AngularJS服务绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！