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

lcj 发表于 Dev

LCJ

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

如何刷新第二个div数据

不使用watch或ng-change
和手表一起使用

参考：

在Angular中使用ng-change代替$ watch

<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>

阿道夫斯

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

<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>