角度js中控制器之间的数据共享

问题描述 投票：1回答：1

嗨，我是Angularjs的新手。我正在学习如何使用dataservice在两个控制器之间共享数据。看一下教程，我制作了自己的程序，但它没有用。任何人都可以在这里暗示我做错了吗？

<!DOCTYPE html>
<html>
  <head>
    <title>AngularJS Services</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="dataServiceApp">
            <div ng-controller="ChildCtrl">
                    <h2>First controller</h2>
                    <button>+</button>{{Holder.value}}
                  </div>
                  <div ng-controller="ChildCtrl2">
                    <h2>Second controller</h2>
                    <button>+</button>{{Holder.value}}
                  </div>
    </div>
    <script>
        var myapp = angular.module("dataServiceApp",[]);
        myapp.factory('Holder', function() {
  return {
    value: 0
  };
});
myapp.controller('ChildCtrl', function($scope, Holder) {
  $scope.Holder = Holder;
  $scope.increment = function() {
    $scope.Holder.value++;
  };
});

myapp.controller('ChildCtrl2', function($scope, Holder) {
  $scope.Holder = Holder;
  $scope.increment = function() {
    $scope.Holder.value++;
  };
});
    </script>
  </body>
</html>
angularjs angularjs-service
1个回答
0
投票

您忘记在按钮上注册onclick听众：

<button ng-click="increment()">+</button>{{Holder.value}}

希望这可以帮助。完整的工作示例如下：

<!DOCTYPE html>
<html>
  <head>
    <title>AngularJS Services</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="dataServiceApp">
            <div ng-controller="ChildCtrl">
                    <h2>First controller</h2>
                    <button ng-click="increment()">+</button>{{Holder.value}}
                  </div>
                  <div ng-controller="ChildCtrl2">
                    <h2>Second controller</h2>
                    <button ng-click="increment()">+</button>{{Holder.value}}
                  </div>
    </div>
    <script>
        var myapp = angular.module("dataServiceApp",[]);
        myapp.factory('Holder', function() {
  return {
    value: 0
  };
});
myapp.controller('ChildCtrl', function($scope, Holder) {
  $scope.Holder = Holder;
  $scope.increment = function() {
    $scope.Holder.value++;
  };
});

myapp.controller('ChildCtrl2', function($scope, Holder) {
  $scope.Holder = Holder;
  $scope.increment = function() {
    $scope.Holder.value++;
  };
});
    </script>
  </body>
</html>

附：我也完全赞同JB Nizet的评论：检查你是否真的需要学习AngularJS而不是Angular 2-7 / VueJS / React。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.