我喜欢用简单的例子来说明简单的事情:)

下面是一个非常简单的服务示例:

angular.module('toDo',[])

.service('dataService', function() {

  // private variable
  var _dataObj = {};

  // public API
  this.dataObj = _dataObj;
})

.controller('One', function($scope, dataService) {
  $scope.data = dataService.dataObj;
})

.controller('Two', function($scope, dataService) {
  $scope.data = dataService.dataObj;
});

这里是jsbin

这里有一个非常简单的Factory示例:

angular.module('toDo',[])

.factory('dataService', function() {

  // private variable
  var _dataObj = {};

  // public API
  return {
    dataObj: _dataObj
  };
})

.controller('One', function($scope, dataService) {
  $scope.data = dataService.dataObj;
})

.controller('Two', function($scope, dataService) {
  $scope.data = dataService.dataObj;
});

这里是jsbin

如果这太简单了，这里有一个更复杂的例子

也可以在这里查看相关的最佳实践评论

不创建服务的解决方案，使用$rootScope:

要跨应用控制器共享属性，你可以使用Angular $rootScope。这是共享数据的另一种选择，让人们知道它。

在控制器之间共享一些功能的首选方式是服务，读取或更改全局属性可以使用$rootscope。

var app = angular.module('mymodule',[]);
app.controller('Ctrl1', ['$scope','$rootScope',
  function($scope, $rootScope) {
    $rootScope.showBanner = true;
}]);

app.controller('Ctrl2', ['$scope','$rootScope',
  function($scope, $rootScope) {
    $rootScope.showBanner = false;
}]);

在模板中使用$rootScope(使用$root访问属性):

<div ng-controller="Ctrl1">
    <div class="banner" ng-show="$root.showBanner"> </div>
</div>

跨多个控制器共享变量的一种方法是创建一个服务，并将其注入到您想要使用它的任何控制器中。

简单的服务示例:

angular.module('myApp', [])
    .service('sharedProperties', function () {
        var property = 'First';

        return {
            getProperty: function () {
                return property;
            },
            setProperty: function(value) {
                property = value;
            }
        };
    });

在控制器中使用服务:

function Ctrl2($scope, sharedProperties) {
    $scope.prop2 = "Second";
    $scope.both = sharedProperties.getProperty() + $scope.prop2;
}

这在本博客中有很好的描述(特别是第2课)。

我发现，如果你想跨多个控制器绑定到这些属性，如果你绑定到一个对象的属性而不是一个基本类型(布尔值，字符串，数字)来保留绑定引用，效果会更好。

示例:var property = {Property1: 'First'};而不是var property = 'First';。

更新:(希望)让事情更清楚这里是一个小提琴，显示了一个例子:

绑定到共享值的静态副本(在myController1中) 绑定到原语(字符串) 绑定到对象的属性(保存到作用域变量) 绑定到共享值，当值更新时更新UI(在myController2中) 绑定到返回原语(字符串)的函数 绑定到对象的属性 对对象属性的双向绑定

下面的例子展示了如何在兄弟控制器之间传递变量，并在值发生变化时采取行动。

用例示例:在侧栏中有一个过滤器，可以更改另一个视图的内容。

angular.module('myApp', []) .factory('MyService', function() { // private var value = 0; // public return { getValue: function() { return value; }, setValue: function(val) { value = val; } }; }) .controller('Ctrl1', function($scope, $rootScope, MyService) { $scope.update = function() { MyService.setValue($scope.value); $rootScope.$broadcast('increment-value-event'); }; }) .controller('Ctrl2', function($scope, MyService) { $scope.value = MyService.getValue(); $scope.$on('increment-value-event', function() { $scope.value = MyService.getValue(); }); }); <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <h3>Controller 1 Scope</h3> <div ng-controller="Ctrl1"> <input type="text" ng-model="value"/> <button ng-click="update()">Update</button> </div> <hr> <h3>Controller 2 Scope</h3> <div ng-controller="Ctrl2"> Value: {{ value }} </div> </div>

上面的示例非常有效。我只是做了一个修改，以防我需要管理多个值。我希望这能有所帮助!

app.service('sharedProperties', function () {

    var hashtable = {};

    return {
        setValue: function (key, value) {
            hashtable[key] = value;
        },
        getValue: function (key) {
            return hashtable[key];
        }
    }
});

——我知道这个答案不适合这个问题，但我希望阅读这个问题并希望处理工厂等服务的人避免这样做的麻烦----

为此，您将需要使用服务或工厂。

服务是在非嵌套控制器之间共享数据的最佳实践。

关于数据共享这个主题的一个非常非常好的注释是如何声明对象。我很不幸，因为我在阅读AngularJS之前就掉进了一个陷阱，我非常沮丧。所以让我帮你避免这个麻烦。

我从“ng-book: the complete book on AngularJS”中读到，AngularJS的ng-models在控制器中创建为裸数据是错误的!

$scope元素应该像这样创建:

angular.module('myApp', [])
.controller('SomeCtrl', function($scope) {
  // best practice, always use a model
  $scope.someModel = {
    someValue: 'hello computer'
  });

而不是像这样:

angular.module('myApp', [])
.controller('SomeCtrl', function($scope) {
  // anti-pattern, bare value
  $scope.someBareValue = 'hello computer';
  };
});

这是因为DOM(html文档)建议(最佳实践)将调用包含为

<div ng-model="someModel.someValue"></div>  //NOTICE THE DOT.

这对于嵌套控制器非常有用，如果你想让你的子控制器能够从父控制器....改变一个对象

但在您的情况下，您不需要嵌套作用域，但是有一个类似的方面可以从服务获取对象到控制器。

假设你有一个服务“Factory”，在返回空间中有一个objectA，它包含objectB, objectB又包含objectC。

如果你想从你的控制器GET对象tc到你的作用域，这样说是错误的:

$scope.neededObjectInController = Factory.objectA.objectB.objectC;

那没用的… 相反，只用一个点。

$scope.neededObjectInController = Factory.ObjectA;

然后，在DOM中，您可以从objectA调用objectC。这是与工厂相关的最佳实践，最重要的是，它将有助于避免意外和不可捕捉的错误。