Question

我在模板中有两个控制器。我正在使用服务在它们之间传递数据。但是，使用文本框更新模型值时，仅在使用第一个控制器的第一个div上刷新文本（双向）。

如何刷新第二个div数据

不使用watch或ng-change
使用手表

参考：

Using ng-change instead of $watch in Angular

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js">
    </script>
</head>
<body ng-app="myApp">
    <div class="container" style="padding-top: 20px;">
        <div ng-controller="myController">
	   <input type="text" ng-model="valueA">
	   <p>From First: {{valueA}}</p>
        </div>
    </div>
   <div class="container" style="padding-top: 20px;">
        <div ng-controller="mySECONDController">
            <p>From Second: {{valueB}}</p>
        </div>
    </div>
    <script>

        //defining module
        var app = angular.module('myApp', []);

        //defining service
        app.service('myService', function () {
            this.name = '';
            this.setName = function (newName) 
	    {
                this.name = newName;
            };
	    this.getName = function () 
	    {
                return this.name;
            };
        }
	);
        


        //defining controller
        app.controller('myController', function ($scope, myService) {
            
	    myService.setName("Lijo");
	    $scope.valueA = myService.getName();
           
        });

	//defining controller
        app.controller('mySECONDController', function ($scope, myService) {
            
	    $scope.valueB = myService.getName();
           
        });
	


    </script>
</body>
</html>

Answer 1

您可以做的是将值设置为第一个控制器中的服务，并使用第二个控制器中的服务获取它。因此，它将始终响应存储在服务中的值。

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js">
    </script>
</head>
<body ng-app="myApp">
    <div class="container" style="padding-top: 20px;">
        <div ng-controller="myController">
	   <input type="text" ng-model="valueA" ng-change="myService.setName(valueA)">
	   <p>From First: {{myService.getName()}}</p>
        </div>
    </div>
   <div class="container" style="padding-top: 20px;">
        <div ng-controller="mySECONDController">
            <p>From Second: {{myService.getName()}}</p>
        </div>
    </div>
    <script>

        //defining module
        var app = angular.module('myApp', []);

        //defining service
        app.service('myService', function () {
            this.name = '';
            this.setName = function (newName) 
	    {
                this.name = newName;
            };
	    this.getName = function () 
	    {
                return this.name;
            };
        }
	);
        


        //defining controller
        app.controller('myController', function ($scope, myService) {
           myService.setName("Lijo");

           $scope.myService= myService;
	       $scope.valueA = myService.getName();
        });

	//defining controller
        app.controller('mySECONDController', function ($scope, myService) {      
	    $scope.myService= myService;   
        });
	


    </script>
</body>
</html>

如何刷新第二个控制器中的数据

1 个答案: