如何使用angularjs中的scope变量和.Service getter-setter方法使两个不同的控制器更新和检



我想要一个angularjs代码,其中一个控制器使用.service-set方法来设置值,另一个控制器则使用.service-get方法来检索该值。我也试过这个代码,请让我知道为什么它没有打印正确的输出。

我试过这个代码,但在设置值后,它没有打印值。。。你能帮我解决这个问题吗。。

    <html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" ></script>
    <script>
    var app = angular.module('myApp', []);
app.service('sharedProperties', function() {
   var stringValue = ' ';
    return{
        getString: function() {
            return stringValue;
        },
        setString: function(value) {
            stringValue = value;
        }
    }});
app.controller('get', function($scope,sharedProperties) {
    $scope.stringValue = sharedProperties.getString();
});
app.controller('set', function($scope, sharedProperties) {
    $scope.setString = function(newValue) {
        $scope.objectValue.data = newValue;
        sharedProperties.setString(newValue);
    };
});
  </script>
   </head>
    <body ng-app="myApp">
      <div ng-controller="set">
        <input type=text ng-model="newValue">
        <button onclick="setString(newValue)" >Click here</button>
       </div>
       <div ng-controller="get">
           value is {{stringValue}}
        </div>
    </body>
</html>

我们将不胜感激。

我不明白是什么阻止了你?只需阅读棱角分明的文档https://docs.angularjs.org/guide/services

快速小提琴

angular.module('serviceApp',[]);
angular.module('serviceApp').service('SharedService',[function(){
  var value = '';
  this.set = function(val){
    value = val;
  };
  this.get = function(val){
    return value;
  }
}]);
angular.module('serviceApp').controller('OneCtrl',['$scope','SharedService',function($scope,sharedService){
  $scope.form = {value:''}
  $scope.setValue = function(){
    sharedService.set($scope.form.value);
  }
}]);
angular.module('serviceApp').controller('TwoCtrl',['$scope','SharedService',function($scope,sharedService){
  $scope.value = sharedService.get();
  
  $scope.getValue = function(){
    $scope.value = sharedService.get();
  }
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="serviceApp">
  <div ng-controller="OneCtrl">
    <input ng-model="form.value" type="text" />
    <button type="button" ng-click="setValue()">Set</button>
  </div>
  <div ng-controller="TwoCtrl">
    <button type="button" ng-click="getValue()">Get</button>
    Value: {{value}}
  </div>
</div>

最新更新