angularjs - 如何正确包含全局变量并在 Angular JS 中更新它们？

Question

假设我的应用程序有一个变量“globalFruits”来跟踪我的应用程序中的所有“水果”。

var globalFruits = {}

globalFruits['Pear'] = {name:'Pear', color:'green'}; globalFruits['Apple'] = {name:'Apple', color:'Blue'};

这个全局变量应该如何包含在我的 AngularJS 应用程序中，以便我可以拥有可以调用它并检查其状态的指令或范围？或者这不是 AngularJS 的方式？

Answer 1

您可以为您的模块定义一个值：

app.value('globalFruits', {
  Pear: {name:'Pear', color:'green'},
  Apple: {name:'Apple', color:'Blue'}
);

然后，您可以在想要使用它时注入此值：

app.controller('MyController', ['$scope', 'globalFruits', function($scope, globalFruits) {
  $scope.globalFruits = globalFruits;
}]);

Answer 2

有一个$rootScope模型可以用于类似的事情

app.config(['$rootScope', function ($rootScope) {
    $rootScope.fruits = [
        {name:'Pear', color:'green'},
        {name:'Apple', color:'Blue'}
    ];
}]);

您可以在 HTML 视图中照常使用它：

<ul>
    <li ng-repeat="fruit in fruits">{{ fruit.name }}</li>
</ul>

要在浏览器中调试作用域变量，您可能需要安装和使用适用于 Google Chrome 的AngularJS Batarang扩展。

更多信息：http ://docs.angularjs.org/guide/scope