Question

我从AngularJS开始，我正在尝试创建一个非常简单的程序，用户可以选择自己喜欢的水果，结果如下所示。

可以通过两种不同的方式执行此选择：通过3个快捷按钮或在文本条目中键入名称。这两种模式有不同的控制器。

当我使用按钮效果很好时，但不能使用文本编辑器。

我想传输在controller1的文本条目中写入的名称并打印结果。

我的代码是：

<html ng-app="myApp">
    <head>
        <title>Fruits</title>
        <script src="https://code.angularjs.org/1.2.19/angular.js"></script>
        <script>
            var app = angular.module('myApp',[]);


            app.service('simpleService', function() {

              var _fruit = 'None :(';

              var addFruit = function(newObj) {
                    console.log(newObj);
                  _fruit = newObj;
              }

              var getFruit = function(){
                  return _fruit;
              }

              return {
                addFruit: addFruit,
                getFruit: getFruit
              };
            })



            app.controller('controller1',function($scope, simpleService){

                $scope.fruit = simpleService.getFruit();

                $scope.fruitApple = function(){
                    $scope.fruit ='Apple';
                }

                $scope.fruitPear = function(){
                    $scope.fruit ='Pear';
                }

                $scope.fruitBanana = function(){
                    $scope.fruit ='Banana';
                }
            })

            app.controller('controller2', function($scope, simpleService){
                $scope.fruit2 = 'Other?';

                $scope.fruitEditor = function(f){
                    if(angular.isString(f)){
                        $scope.fruit2 = f;
                        simpleService.addFruit(f);
                    }
                }               
            });
        </script>

    </head>

    <body>
        <div ng-controller="controller1">
            <button ng-click="fruitPear()">Pear</button>
            <button ng-click="fruitApple()">Apple</button>
            <button ng-click="fruitBanana()">Banana</button>
            <br/>
            <br/>

            <div ng-controller="controller2">
                Edit:
                <input type="text" ng-change="fruitEditor(fruit2)" ng-model="fruit2">
            </div>

            <h5>Favorite fruit: {{fruit}}</h5>
        </div>
    </body>
</html>

问候。

Answer 1

因为您只在初始加载时设置水果值。如果你想让它与服务中的任何内容保持同步，你应该在视图上调用getFruit服务方法，以便它在每个摘要周期从服务获得最新值，以确保它正确。

$scope.getFruit = simpleService.getFruit;

在视图

上

<h5>Favorite fruit: {{getFruit()}}</h5>

同样的事情适用于设置规则时，您不应该在范围变量中添加fruit，只需通过调用addFruit方法将它们放在服务变量中。

simpleService.addFruit('Apple');

在AngularJS中打印两个不同控制器的结果

1 个答案: