Question

需要帮助了解下面的代码是如何工作的。

第一次加载后，div元素中显示的值以及输入元素是＆＃39;用户名＆＃39;，如预期的那样。

但是，为什么在修改input元素中的值时，第一个div元素中的值会被修改，因为两个控制器都有不同且互斥的范围变量??

我相信这是与rootScope的连接，但我不知道如何连接点。

＆＃13;

<html ng-app='myApp'>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.factory('userService',['$timeout', function($timeout){
            var user = {}
            
            $timeout(function(){
                
                user.name = 'Username';
            },5000);
           
            return user;
        }])
        app.controller('c1', ['$scope', 'userService', function($scope, userService){
            $scope.user = userService;
  
        }])
        app.controller('c2', ['$scope', 'userService', function($scope, userService){
            $scope.user = userService;
        }])
    </script>
    <body>
        <div ng-controller="c1"><h1>{{user.name}}</h1></div>
        <div ng-controller="c2"><input type="text" ng-model="user.name"/></div>
    </body>
    
</html>

＆＃13;

Answer 1

在angularJS中，服务是单身。

就像你永远不会更新用户的引用一样，你总是使用同一个对象。

多个组件共享的此服务是共享数据的常用方法。

Answer 2

这是因为您在两个控制器中引用了相同的工厂对象userService。

您的工厂是单件对象，即仅初始化一次。因此，当您将此作为依赖项注入控制器时，您实际上正在与应用程序中的所有控制器共享相同的实例。

您的范围变量$scope.user指的是两个控制器中的factory object。您已将user.name与ng-model绑定在一起。

因此，它第一次显示Username，因为$scope.user.name或{而不是我应该说userService.name的值。因此，当用户在文本框中键入时，userService.name实际绑定的内容为$scope.user时引用userService，因此会更新userService.name，这会反映在您的控制器中{ {1}}也指工厂对象的同一实例。因此这种行为。

以下是相同的演示，可以帮助您了解更多信息。正如您所看到的，我已将c1创建为控制器$scope.user中的新对象，因此它现在不会引用工厂对象，因此名称不会更新。但是在控制器c1中它将被更新。

c2

Please read this for more info on services in angular

Official Documentation

希望有所帮助：）

Answer 3

但是，当我修改input元素中的值时，为什么第一个div元素中的值会被修改？

因为你只是在这里使用双向绑定，它确定你有两个不同的控制器有两个不同的范围但这两个范围变量File.open("input.txt", "r") do |f| fight_info = f.read m = fight_info.match(/File\sId(.+?)File\sId/m) puts m end引用相同的服务值{{1} } 因此，一个控制器的更改将影响第二个控制器。

换句话说，将两个变量绑定到同一个服务与使用一个控制器相同。

这就是Data binding在Angular中的作用：

AngularJS应用程序中的数据绑定是模型和视图组件之间数据的自动同步。 AngularJS实现数据绑定的方式允许您将模型视为应用程序中的单一事实源。视图始终是模型的投影。当模型更改时，视图会反映更改，反之亦然。

角度服务和范围 - 为什么价值在其他范围内发生变化？

3 个答案: