Javascript 我需要使用一个服务来跨多个视图存储、保存和提供数据

这可能是非常基本的，但我是一个新的角度，我被难住了。我有两个视图需要从表单访问相同的用户输入数据。每个视图都有自己的控制器

这就是我所处的位置：

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）

结果为{{data.Result}

---

这没有显示任何内容，我想这是因为服务或控制器在更改视图时重置了值？我使用服务来执行此操作是完全错误的吗？

您必须更新服务中的数据，以便它可以在其他控制器中使用：

// 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);
    }
}])

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

在控制器2中，您可以使用如下值：

//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);
    }
}])

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

希望这会有所帮助。

$scope.initValue=function（）{}和$scope.onSubmit=function（）{}。不需要在它们之前添加“var”。