AngularJS 模块/范围共享 [英] AngularJS Modules/Scope Sharing

问题描述

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

MainController.js

var app = angular.module('app', ['SomeController', 'MainController']);app.controller('MainController', function ($scope) {//做一些事情}

SomeController.js

var SomeController= angular.module('SomeController', []);SomeController.controller('SomeController', function ($scope) {$scope.variable = "测试";//做一些其他的事情}

我遇到的问题是模块之间没有共享范围.例如，从 MainController 我无法获得变量test".

• 这方面的最佳做法是什么?我是否将所有控制器存储在 1 个文件的 1 个模块中?
• 如何让 1 个页面包含 2 个控制器并在它们之间共享 $scope，或者将所有内容都放在一个控制器中是否可以?

解决方案

你可以使用这样的服务:现场演示(点击).

JavaScript:

var otherApp = angular.module('otherApp', []);otherApp.factory('myService', function() {var 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;});

标记:

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

这是一篇关于与服务共享数据的好文章.

您还可以嵌套控制器以使子范围继承父控制器的范围属性: http://jsbin.com/AgAYIVE/3/edit

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

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

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

I recently started using AngularJS and the way I'm building my apps now is like this:

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
}

The problem that Im' running into is that the scope is not being shared between modules. From MainController I can't get the variable "test" for example.

• What is the best practice for this? Do I store all my controllers in 1 module in 1 file?
• How can i have 1 page with 2 controllers and share the $scope between them, or is it OK to put everything in just one controller ?

解决方案

You could use a service like this: Live demo here (click).

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; 
});

Markup:

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

Here's a nice article on sharing data with services.

You can also nest controllers to have the parent controller's scope properties inherited by the child scope: 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>

But, the child won't update the parent - only the parent's properties update the child.

You would use "the dot rule" to have updates on the child affect the parent. That means nesting your properties in an object. Since the parent and child both have the same object, changes on that object will be reflected in both places. That's just how object references work. A lot of people consider it best practice to not use inheritance, but put everything in directives with isolated scope.

这篇关于AngularJS 模块/范围共享的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！