AngularJS模块/范围共享

一尘不染

AngularJS模块/范围共享

angularjs

我最近开始使用AngularJS，现在构建应用的方式是这样的：

MainController.js

var app = angular.module('app', ['SomeController', 'MainController']);

app.controller('MainController', function ($scope) {
    // do some stuff
}

SomeController.js

var SomeController= angular.module('SomeController', []);

SomeController.controller('SomeController', function ($scope) {
    $scope.variable = "test";
    // do some otherstuff
}

Im遇到的问题是范围未在模块之间共享。例如，无法从 MainController 获得变量“ test”。

最佳做法是什么？是否将所有控制器都以1个文件存储在1个模块中？
我如何能有1个页面和2个控制器并$scope在它们之间共享，还是可以将所有内容仅放在一个控制器中？

阅读 186

2020-07-04

共1个答案

一尘不染

您可以使用以下服务： 在此处进行实时演示（单击）。

JavaScript：

var otherApp = angular.module('otherApp', []);
otherApp.factory('myService', function() {
  var myService = {
    someData: ''
  };
  return myService;
});
otherApp.controller('otherCtrl', function($scope, myService) {
  $scope.shared = myService;
});


var app = angular.module('myApp', ['otherApp']);

app.controller('myCtrl', function($scope, myService) {
  $scope.shared = myService; 
});

标记：

  <div ng-controller="otherCtrl">
    <input ng-model="shared.someData" placeholder="Type here..">
  </div>
  <div ng-controller="myCtrl">
  {{shared.someData}}
  </div>

这是一篇关于与服务共享数据的不错的文章。

您还可以嵌套控制器，以使父控制器的作用域属性被子作用域继承：http :
//jsbin.com/AgAYIVE/3/edit

  <div ng-controller="ctrl1">
    <span>ctrl1:</span>
    <input ng-model="foo" placeholder="Type here..">
    <div ng-controller="ctrl2">
      <span>ctrl2:</span>
      {{foo}}
    </div>
  </div>

但是，子级不会更新父级-只有父级的属性会更新子级。

您将使用“点规则”使子项上的更新影响父项。这意味着将您的属性嵌套在一个对象中。由于父级和子级都具有相同的对象，因此该对象上的更改将反映在两个地方。这就是对象引用的工作方式。许多人认为最好的做法是不使用继承，而是将所有内容放入具有孤立范围的指令中。

2020-07-04