$ scope.watch在兩個不同的角度頁面之間不起作用

Question

下面的代碼在一個頁面中與不同的控制器一起工作，但是當我將值從一個頁面傳遞到另一個頁面時，scope.watch不起作用。你怎麼能這樣做？下面是我的代碼。

.factory('Data', function() { 

    var data = { 
     LastName: '', 
    } 
    return { 
     getLastName: function() { 
      return data.LastName; 
     }, 
     setLastName: function (lastname) { 
      data.LastName = lastname; 
     } 
    } 
} 
    //FIRST CONTROLLER 
    $scope.lastname = ''; 
    $scope.$watch('lastname', function (newValue2, oldValue2) { 
     if (newValue2 !== oldValue2) 
      Data.setLastName(newValue2); 
    }); 
    //GET FIRST CONTROLLER INTO SECOND 
    $scope.$watch(function() { 
     return Data.getLastName(); 
    }, function (newValue2, oldValue2) { 
     if (newValue2 !== oldValue2) 
      $scope.lastname = newValue2; 
    }); 
    //form 
    //Firstcontroller 
    < input type = "text" 
      name="lastname" 
      placeholder = "Suhr" 
      ng-model="lastname" 
      ng-minlength="3" required /> 

Answer 1

移植所有的代碼，它的工作原理！

angular.module("test", []) 
 
    .controller('Test1', Test1) 
 
    .controller('Test2', Test2) 
 
    .factory('Data', Data); 
 

 
function Test1($scope, Data) { 
 
    $scope.lastname = ''; 
 

 
    $scope.$watch('lastname', function(newValue2, oldValue2) { 
 
    if (newValue2 !== oldValue2) 
 
     Data.setLastName(newValue2); 
 
    }); 
 
} 
 

 
function Test2($scope, Data) { 
 
    $scope.$watch(function() { 
 
    return Data.getLastName(); 
 
    }, function(newValue2, oldValue2) { 
 
    if (newValue2 !== oldValue2) 
 
     $scope.lastname = newValue2; 
 
    }); 
 
} 
 

 
function Data() { 
 
    var data = { 
 
    LastName: '', 
 
    } 
 

 
    return { 
 
    getLastName: function() { 
 
     return data.LastName; 
 
    }, 
 
    setLastName: function(lastname) { 
 
     data.LastName = lastname; 
 
    } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 

 
<div ng-app="test"> 
 
    <div ng-controller="Test1"> 
 
    <input type="text" name="lastname" ng-model="lastname" placeholder="Suhr" ng-minlength="3" required> 
 
    </div> 
 

 
    <div ng-controller="Test2"> 
 
    {{lastname}} 
 
    </div> 
 
</div>