AngularJS:我如何在控制器之间传递变量?

20 浏览
0 Comments

AngularJS:我如何在控制器之间传递变量?

我有两个 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();

也会失败。

注意:这些控制器并没有彼此嵌套。

admin 更改状态以发布 2023年5月22日
0
0 Comments

我喜欢用简单的例子来阐述简单的事情 🙂

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

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

这里还有一个非常简单的工厂示例:

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


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

还可以查看这里的答案以获得相关的最佳实践评论

0
0 Comments

一种跨多个控制器共享变量的方法是创建一个服务并在想要使用它的任何控制器中注入它。\n\n简单的服务示例:\n\n

angular.module('myApp', [])
    .service('sharedProperties', function () {
        var property = 'First';
        return {
            getProperty: function () {
                return property;
            },
            setProperty: function(value) {
                property = value;
            }
        };
    });

\n\n在控制器中使用服务:\n\n

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

\n\n在这篇博客(特别是第二课及以上)中对此进行了很好的描述。\n\n我发现,如果您要在多个控制器之间绑定这些属性,最好绑定到对象的属性而不是原始类型(布尔型、字符串、数值),以保留绑定引用。 \n\n例如:var property = { Property1: \'First\' };而不是var property = \'First\';。\n\n


\n\n更新: (希望)更明确地说明,这里有一个fiddle显示了以下示例:\n\n

    \n

  • 绑定到共享值的静态副本(在myController1中)\n
      \n

    • 绑定到原始类型(字符串)
    • \n

    • 绑定到对象的属性(保存到作用域变量)
    • \n

  • \n

  • 绑定到更新UI的共享值(在myController2中)\n
      \n

    • 绑定到返回原始类型的函数(字符串)
    • \n

    • 绑定到对象的属性
    • \n

    • 双向绑定到对象的属性
    • \n

  • \n

0