我需要使用服務來存儲，保留多個視圖中的數據並提供數據

Question

這可能是非常基本的，但我對角度很陌生並且很難過。我有2個視圖需要訪問表單中的相同用戶輸入數據。每個視圖都有自己的控制器。

下面是我在哪裏：

JAVASCRIPT

.config(function($routeProvider) { 
    $routeProvider 
    .when('/view1', { 
     templateUrl : 'view1.html', 
     controller: 'ctrl1' 
    }) 
    .when('/view2', { 
     templateUrl : 'view2.html', 
     controller : 'ctrl2' 
    }) 
}) 

//SERVICE TO HOLD DATA 
.service('Data', function() { 
    return {}; 
}) 

//CONTROLLER 1 
.controller('ctrl1', ['$scope', 'Data', function($scope, Data) { 
    $scope.data = Data; 

    var $scope.initValue = function() { 
     $scope.data.inputA = 0; //number 
     $scope.data.inputB = 0; //number 
    } 

    var $scope.onSubmit = function() { 
     $scope.data.result = $scope.data.inputA + $scope.data.inputB; 
    } 
}]) 

//CONTROLLER 2 
.controller('ctrl2', ['$scope', 'Data', function($scope, Data) { 
     $scope.data = Data; 
    } 
}]) 

HTML（view2.html）

<p>Result is {{data.result}}</p> 

這顯示任何內容，我想這是因爲服務或控制器在更改視圖時重置值？我只是完全錯誤的使用服務來做到這一點？

Answer 1

您必須更新該服務的數據，以便它可以在其他控制器一起使用：

// define a var container in the service 
// you can make it neat by creatin a getter and setter 
.service('Data', function() { 
    var value = null; 
    var setValue = function(val) { 
     this.value = val; 
    }; 
    var getValue = function() { 
     return this.value; 
    }; 

    return { 
     value: value, 
     setValue: setValue, 
     getValue: getValue, 
    }; 
} 

然後在控制器1，你可以在服務中設置的值，象這樣：

//CONTROLLER 1 
.controller('ctrl1', ['$scope', 'Data', function($scope, Data) { 
    $scope.inputA = 0; 
    $scope.inputB = 0; 

    $scope.onSubmit = function() { 
     $scope.result = $scope.inputA + $scope.inputB; 
     Data.setValue($scope.result); 
    } 
}]) 

並在控制器2，您可以使用像這樣的值：

//CONTROLLER 2 
.controller('ctrl2', ['$scope', 'Data', function($scope, Data) { 
    $scope.value = Data.getValue(); 
}]) 

希望這會有所幫助。