Question

我刚刚开始使用AngularJS，我尝试使用工厂在两个控制器之间共享数据（两个控制器在同一个ng-app模块中）。来自controller1的数据（HTML输入字段）似乎在大多数时间与控制器2共享;但是当我删除输入字段的所有内容时，$ watch似乎无法正常工作！我发现用文字解释有点困难。下面的屏幕截图可能有所帮助。

enter image description here

这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <% include ../partials/head %>
  </head>

  <body class="container" ng-app='myApp'>

    <div ng-controller="ctrl1">
        <input type="text" ng-model="firstName">
        <br>
        Input is : <strong>{{firstName}}</strong>
    </div>

    <div ng-controller="ctrl2">
        Input should also be here: {{firstName}}
    </div>


    <script>

        var myApp = angular.module('myApp', []);

        myApp.factory('Data', function () {
            var data = {
              FirstName: ''
            }

            return {
              getFirstName: function () {
                  return data.FirstName;
              },
              setFirstName: function (x) {
                  data.FirstName = x;
              }
            }
        });

        myApp.controller('ctrl1', function ($scope, Data) {
            $scope.firstName = ''

            $scope.$watch('firstName', function(newVal){
              if(newVal){Data.setFirstName(newVal);}
            });
        });

        myApp.controller('ctrl2', function ($scope, Data) {
            $scope.$watch(function(){return Data.getFirstName();}, function(newVal){
              if(newVal){$scope.firstName = newVal;}
            });
        });
    </script>

  </body>

  <footer>
        <% include ../partials/footer %>
  </footer>
</html>

我还为此代码找到了一个jsfiddle。 http://jsfiddle.net/5LL3U/2/

感谢任何帮助。谢谢！

Answer 1

你需要同时检查newValue和oldValue。如果是new newValue，它不会调用你的工厂，也不会在变量上设置值。： -

var myApp = angular.module('myApp', []);


myApp.factory('Data', function(){
    var data =
        {
            FirstName: ''
        };

    return {
        getFirstName: function () {
            return data.FirstName;
        },
        setFirstName: function (firstName) {
            data.FirstName = firstName;
        }
    };
});

myApp.controller('FirstCtrl', function( $scope, Data ) {

    $scope.firstName = '';

    $scope.$watch('firstName', function (newValue,oldValue) {
        console.log(oldValue+"   "+newValue);
        if (newValue!=oldValue) Data.setFirstName(newValue);
    });
});

myApp.controller('SecondCtrl', function( $scope, Data ){

    $scope.$watch(function () { return Data.getFirstName(); }, function (newValue,oldValue) {
        if (newValue!=oldValue) $scope.firstName = newValue;
    });
});

小提琴： - http://jsfiddle.net/1d1vL1hd/

Answer 2

你的病情有误。当为空时，newValue是假的，firstName没有更新。

function (newValue) {
    if (newValue) Data.setFirstName(newValue);
});

所以你需要改变或消除你的病情。

Answer 3

$ scope。$ watch（＆＃39; object＆＃39;，function（new，old）{ }， true ）;

这里的真实是对象平等......就像这个手表总是在值变化时被触发

此外，要在控制器之间共享数据，请使用服务而不是工厂。

Answer 4

试试这个：只需从代码中删除if (newValue)即可。

demo here

Answer 5

只需改变一下：

<input type="text" ng-model="firstName" ng-trim="false">

http://jsfiddle.net/twt2nbpL/#&togetherjs=53GqpR44vP

angularJS $ scope。当输入框变空时，$ watch无效

5 个答案: