Angular在控制器之间传递数据。

21 浏览
0 Comments

Angular在控制器之间传递数据。

我有一个需求，需要在控制器之间共享数据，所以我创建了一个工厂。

假设我有一个URL：abc/123（注意：123是动态的，我需要从控制器中传递它）

我的代码

appServices.factory('classesService', function($http){
    return {
        getClasses: function(value) {
            return $http.get(urlprefix + 'orgs/' + value + '/classes?with-users=true');
        }
    };
});

在控制器中

classesService.getClasses($scope.organization.id).then(function(data){});

现在假设我在3个控制器中使用它，会有3个调用发送到服务器。我不希望有3个调用，我只想要一个调用。

注意：value对于所有三个控制器来说是相同的。

有没有办法可以实现这个？谢谢。

0

3 答案

0 Comments

问题的出现原因是在Angular中，控制器之间的数据传递不够灵活，需要找到一种解决方法来实现控制器之间的数据共享。

解决方法是启用服务的缓存功能。这样，所有的控制器都可以访问该方法，并且请求只会发送一次。代码如下：

return $http.get(urlprefix + 'orgs/' + value + '/classes?with-users=true', {cache: true});

这是一个非常基本的缓存策略，可能需要更高级的策略，但这是第一步。

在更新中，如果第二个或第三个请求在第一个请求完成之前发出，可能会遇到竞争条件。我们可以轻松地解决这个问题。

appServices.factory('classesService', function($http) {
    var orgsPromise;    
    return {
        getClasses: function(value) {
            if (orgsPromise) return orgsPromise; 
            orgsPromise = $http.get(urlprefix + 'orgs/' + value + '/classes?with-users=true');
            return orgsPromise;
        }
    };
});

以上是关于在Angular中控制器之间传递数据的问题的原因和解决方法。通过启用服务的缓存功能，我们可以实现控制器之间的数据共享，并且通过更高级的策略来解决竞争条件的问题。

0
0 Comments

在Angular中，控制器之间传递数据是一个常见的需求。在上述代码中，问题的出现可能是由于需要在不同的控制器之间共享数据，但没有找到合适的方法来实现这一点。

解决这个问题的方法是使用Angular中的服务（service）。在代码中，我们可以看到定义了一个名为'classesService'的服务，并在其中定义了一个名为'getClasses'的方法。这个方法使用$http服务来获取数据，并将结果存储在变量'classes'中。如果'classes'变量为空，它将发送一个HTTP请求来获取数据。然后，我们定义了一个名为'Classes'的服务，并在其中调用'classesService'服务的'getClasses'方法来获取数据。

在控制器中，我们可以注入'Classes'服务，并将其作为一个参数来使用。在每个控制器中，我们可以定义一个名为'sharedValue'的变量，并将'Classes'服务的值赋给它。

这样，当控制器A、B和C被调用时，它们都会有一个名为'sharedValue'的变量，并且它们的值都将是从'Classes'服务获取的数据。

因此，通过使用服务来传递数据，我们可以在不同的控制器之间共享数据。

完整的文章如下：

在Angular中，控制器之间传递数据是一个常见的需求。在下面的示例代码中，我们可以看到如何在不同的控制器之间共享数据。

首先，我们定义了一个名为'classesService'的服务，并在其中定义了一个名为'getClasses'的方法。这个方法使用$http服务来获取数据，并将结果存储在变量'classes'中。如果'classes'变量为空，它将发送一个HTTP请求来获取数据。

接下来，我们定义了一个名为'Classes'的服务，并在其中调用'classesService'服务的'getClasses'方法来获取数据。

在控制器A、B和C中，我们注入了'Classes'服务，并将其作为一个参数来使用。在每个控制器中，我们定义了一个名为'sharedValue'的变量，并将'Classes'服务的值赋给它。

这样，当控制器A、B和C被调用时，它们都会有一个名为'sharedValue'的变量，并且它们的值都将是从'Classes'服务获取的数据。

通过使用服务来传递数据，我们可以在不同的控制器之间共享数据。

以上就是如何在Angular中传递数据的解决方法。通过使用服务，我们可以轻松地在不同的控制器之间共享数据。希望这篇文章对你有所帮助！

0
0 Comments

在Angular中，当我们需要在不同的控制器之间传递数据时，可能会遇到一些问题。下面介绍了出现这个问题的原因以及解决方法。

出现问题的原因：

在Angular中，每个控制器都有自己的作用域(scope)，它们之间相互独立。当我们需要在不同的控制器之间传递数据时，由于作用域的限制，我们无法直接在一个控制器中访问另一个控制器的数据。

解决方法：

为了解决这个问题，我们可以使用UI-ROUTER-EXTRAS插件。该插件提供了一种简单而强大的方法来在控制器之间传递数据。

首先，我们需要在我们的应用中引入UI-ROUTER-EXTRAS插件。可以通过以下方式引入：

然后，我们需要在我们的应用中配置UI-ROUTER-EXTRAS插件。可以通过以下方式配置：

angular.module('myApp', ['ui.router.extras'])

接下来，我们可以使用UI-ROUTER-EXTRAS插件提供的`$state.go`方法来在控制器之间传递数据。可以通过以下方式使用：

angular.module('myApp').controller('Controller1', function($scope, $state) {
  $scope.data = 'Hello from Controller1';
  
  $state.go('controller2', {data: $scope.data});
});
angular.module('myApp').controller('Controller2', function($scope, $stateParams) {
  $scope.data = $stateParams.data;
});

在上面的例子中，我们在Controller1中定义了一个数据`$scope.data`，然后使用`$state.go`方法切换到Controller2，并将数据通过`{data: $scope.data}`传递给Controller2。在Controller2中，我们可以通过`$stateParams`获取传递过来的数据。

通过使用UI-ROUTER-EXTRAS插件，我们可以轻松地在控制器之间传递数据，解决了Angular中数据传递的限制问题。

0