使用来自多个控制器的一个视图使用ngresource创建工厂服务

时间:2014-03-07 16:21:09

标签: javascript angularjs service ngresource

/ *habloespañol* /

1 - 我有这个json:

{  "pizarra": [
    {

        "director": "",
        "local": "pizarra",
        "telefono": ["2085236", "2085237", "2085238", "2085239", "2085240", "2085241", "2085242"],
        "ext": ["0", "211"],
        "ubicacion": "lobby",
        "puerta": "15202"


    }
],

    "dirgeneral": [
        {

            "director": "Blanca Rosa Hung Ramos",
            "local": "Secretaria",
            "telefono": ["2082546", "2086376"],
            "ext": ["258"],
            "ubicacion": "Edif. 1 piso 1",
            "puerta": "2"
        },
        {
            "director": "Blanca Rosa Hung Ramos",
            "local": "Especialista de cuadros",
            "telefono": ["2086534"],
            "ext": ["270"],
            "ubicacion": "Edif. 1 piso 1",
            "puerta": "2"
        }
    ]}
      ...

2 - 我有这条路线:

agendaApp.config(['$routeProvider', function($routeProvider){
        $routeProvider.
            when('/', {
                templateUrl: 'src/views/agenda.html',    <----see i use the same view
                controller: 'pizarraCtrl'
            }).
            when('/pizarra', {
                templateUrl: 'src/views/agenda.html',    <----see i use the same view
                controller: 'pizarraCtrl'
            }).
            when('/direccion-general', {
                templateUrl: 'src/views/agenda.html',    <----see i use the same view
                controller: 'dirGrlCtrl'
            }).
       ...

3-我有这项服务:

agendaServices.factory('getApp',['$resource', function($resource){

return $resource('./data/directorio.json', {}, {

    query: {method: 'GET',  isArray: false}
});
   ...

4-我有这个控制器

   agendaControllers.controller('pizarraCtrl', ['$scope', '$rootScope', 'getApp', function ($scope, $rootScope, getApp) {

        var data = getApp.query();
        $rootScope.datos = data;

console.log(data);



}]);
 agendaControllers.controller('dirGrlCtrl', ['$scope', '$rootScope', 'getApp', function ($scope, $rootScope, getApp) {

        var data = getApp.query();
        $rootScope.datos = data;

console.log(data);



}]);
...

5-我有这个部分:

<tr ng-repeat="dir in datos | filter: query | orderBy: orden">

        <td style="width: 200px">{{ dir.local }}</td>
        <td style="width: 120px">
            <select>
                <option ng-repeat="phone in dir.telefono">
                    {{ phone }}
                </option>
            </select>
        </td>
        <td style="width: 80px">
            <select>
                <option ng-repeat="ext in dir.ext">
                    {{ext }}
                </option>
            </select>
            </td>
        <td style="width: 95px">{{ dir.ubicacion }}</td>
        <td style="width: 80px;">{{ dir.puerta }}</td>
    </tr>

我需要的是使用相同的视图来绑定pizzarra url和dirgeneral url。 我知道使用<tr ng-repeat="dir in datos.pizarra | filter: query | orderBy: orden"><tr ng-repeat="dir in datos.dirgeneral | filter: query | orderBy: orden">的不同视图来执行此操作,但如果我尝试过滤控制器中的数据,则:$rootScope.datos = data.pizarra;它不会绑定所需的数据。 当我在控制器中放入console.log(数据);然后查看我的萤火虫,我收到的数据是:f { $promise={...}, $resolved=false, $get=function(), más...}为什么f? 当我点击它时:

$promise
    Object { then=function(), catch=function(), finally=function()}

$resolved
    true


dirgeneral
    [Object { director="Blanca Rosa Hung Ramos", local="Secretaria", telefono=[2], más...}, Object { director="Blanca Rosa Hung Ramos", local="Especialista de cuadros", telefono=[1], más...}, Object { director="Blanca Rosa Hung Ramos", local="Auditoria", telefono=[1], más...}, Object { director="Blanca Rosa Hung Ramos", local="Asesor Juridico", telefono=[1], más...}]


pizarra
    [Object { local="pizarra", telefono=[7], ext=[2], más...}]

$delete
    function() 
...

1 个答案:

答案 0 :(得分:1)

在这部分:

var data = getApp.query();

查询方法返回数据的承诺;这是因为它是一个异步的AJAX方法。我建议你这样做:

getApp.query( function (data) {
    $scope.datos = data.pizarra;
});

我建议仅使用$ scope而不是$ rootScope,如果控制器是使用您需要的数据中的信息分开的,而不使用过滤器:$scope.datos = data.pizarra并且根据控制器您将使用.pizarra或.dirgeneral而不使用使用过滤器。

使用Google翻译进行翻译。原始答案如下。


En esta parte:

var data = getApp.query();

El metodo.query te regresa una promesa de datos,esto pasa porque es un metodo asincrono ajax,te recomiendo hacer esto:

getApp.query( function (data) {
    $scope.datos = data.pizarra;
});

重新推荐usar solo el $ scope en vez de $ rootScope y si los controladores estan separados usa la informacion en datos que necesitas sin usar un filter:$ scope.datos = data.pizarra ya dependiendo en el controlador que lo hagas usarias .pizarra o .dirgeneral y sin usar el filter。