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

I need to use a service to store, hold, and make available data across multiple views

本文关键字：保存 视图 存储 数据 服务 一个      更新时间：2023-09-26

这可能是非常基本的，但我是angular的新手，我被难住了。我有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>

这显示什么，我认为这是因为服务或控制器重置值时改变视图?我用服务来做这件事是不是完全错了?

你必须更新服务中的数据，以便它可以在另一个控制器中使用:

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

相关文章：