pqsAppModule.controller('NotificationBoxController',function($scope,items) {
    $scope.list = items.list();
})

和

pqsAppModule.controller('NotificationController',items) {
    $scope.list = items.list();
})

我需要创建一个“项目”服务,该服务将执行ajax请求并返回任何将注入它的控制器的数据.我希望,查询只进行一次,所有控制器之间共享项目.

pqsAppModule.factory('items',function($http) {
    var items = [];
    var itemsService = {};
    $http.get('api/notification').then(function(response){
        items = response.data;
    });

    itemsService.list = function() {
        return items;
    };

    return itemsService;
});

但我不明白为什么angular发出请求并接收数据,但控制器中的所有项都是空的.

(我只使用虚拟URL来通过异步方式加载数据)

HTML

<div ng-controller="NotificationBoxController">
    <button ng-click="showMe();">press  me</button>
    <pre>NotificationBoxController: {{items.getList()|json}}</pre>
</div>

<div ng-controller="NotificationController">
    <pre>NotificationController: {{items.getList()|json}}</pre>
</div>

JS

var pqsAppModule = angular.module('myApp',[]);
pqsAppModule.controller('NotificationBoxController',items) {
    $scope.items = items;

    $scope.showMe= function(){
     items.query();   
    }
});

pqsAppModule.controller('NotificationController',items) {
    $scope.items = items;
});


pqsAppModule.factory('items',function ($http) {

    var current = {};    

    var address = 'Singapore,SG,Singapore,153 Bukit Batok Street 1';
    var URL = 'http://maps.googleapis.com/maps/api/geocode/json?address=' + address + '&sensor=true';

       var factory = {            
           query: function () {                
                var data = $http({method: 'GET',url:URL}).then(function (result) {
                           current = result.data.results[0];                            
                        },function (result) {
                            alert("Error: No data returned");
                        });  
            },getList: function () {                
               return current;
            }
       }       
        return factory; 
  });

演示Fiddle

在这个例子中,我们从两个控制器的HTML中调用items.getList().但是如果我们想通过控制器更新模型,我们需要一个像$watch这样的监听器

每个联系人都可以有多个地址和电话号码.由于插入和编辑联系人在UI级别需要几乎相同的功能,因此我决定创建一个类似以下的指令来处理地址和电话：

地址：

(function () {
    var app = angular.module("AddressesEditorModule",[]);
    app.directive("addressesEditor",function () {
        return {
            restrict: "E",templateUrl: "/addressesEditorTemplate.html",controller: function ($scope) {
                this.addresses = [
                    // this will hold addresses.
                ];

                // ...
            }
        }
})();

电话：

(function () {
    var app = angular.module("PhonesEditorModule",[]);
    app.directive("phonesEditor",templateUrl: "/phonesEditorTemplate.html",controller: function ($scope) {
                this.phones = [
                    // this will hold phones.
                ];

                // ...
            }
        }
})();

我省略了在指令中声明的方法来处理地址和电话变量.

这两个指令在HTML中使用如下：

<div ng-app="ContactModule">
    <div ng-controller="InsertController as insertCtrlr">
        <!-- some other elements handling contact name goes here -->

        <addresses-editor></addresses-editor>
        <phones-editor></phones-editor>
    </div>
</div>

这项工作完全符合我的预期,正确记录电话和地址.

现在,我想要做的是检索指令内的电话和地址,并将它们发送到服务器,以便记录在数据库的联系人.

我知道如何执行AJAX,但我不知道如何在指令和InsertController之间交换数据(带有我想要的数据的变量是：来自addressesEditor指令的this.addresses和来自phonesEditor指令的this.phones).

我怎么能做到这一点？

为了说明如何完成,我使用服务创建了一些示例代码,以在控制器和指令之间共享数据：

app.factory('SharedService',function() {
  return {
    sharedobject: {
      value: ''
    }
  };
});

http://plnkr.co/edit/Q1VdKJP2tpvqqJL1LF6m?p=preview

希望有所帮助