我有两个Angular控制器:

function Ctrl1($scope) {
    $scope.prop1 = "First";
}

function Ctrl2($scope) {
    $scope.prop2 = "Second";
    $scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}

我不能在Ctrl2中使用Ctrl1,因为它是未定义的。然而,如果我试图像这样传递它。

function Ctrl2($scope, Ctrl1) {
    $scope.prop2 = "Second";
    $scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}

我得到一个错误。有人知道怎么做吗?

Ctrl2.prototype = new Ctrl1();

也失败了。

注意:这些控制器彼此之间不是嵌套的。


当前回答

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

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

    var hashtable = {};

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

其他回答

除了$rootScope和services,还有一个干净简单的解决方案来扩展angular来添加共享数据:

在控制器中:

angular.sharedProperties = angular.sharedProperties 
    || angular.extend(the-properties-objects);

该属性属于'angular'对象,与作用域分离,可以在作用域和服务中共享。

它的一个好处是你不需要注入对象:它们可以在你定义后的任何地方立即访问!

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

简单的服务示例:

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工作的地方工作。不客气(但真的,谢谢那个家伙)

https://github.com/gsklee/ngStorage

定义默认值:

$scope.$storage = $localStorage.$default({
    prop1: 'First',
    prop2: 'Second'
});

访问值:

$scope.prop1 = $localStorage.prop1;
$scope.prop2 = $localStorage.prop2;

存储值

$localStorage.prop1 = $scope.prop1;
$localStorage.prop2 = $scope.prop2;

记住在应用中注入ngStorage,在控制器中注入$localStorage。

不创建服务的解决方案,使用$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>

你可以在服务业或工厂里这样做。除了一些核心差异外,它们本质上是一样的。我在thinkster上找到了这个解释。IO是最容易遵循的。简单、扼要、有效。