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

希望这会有所帮助。

我需要使用服务来存储，保存并在多个视图中提供可用数据

1 个答案: