$http与其他控制器共享数据，并模块化$http调用

Sharing data in $http to other controller and modularizing $http calls

本文关键字：http 调用 模块化 共享 其他 控制器 数据      更新时间：2023-09-26
app.controller('myCtrl', function($scope, $http) {
    var cy = cytoscape({
  container: document.getElementById('cy') 
   });
    $http({
        method : "GET",
        url : host //Some variable declared, not shown in this example.
    }).then(function mySuccess(response) {
        // Add nodes and edges with data received onto the cytoscape.js graph.
    }, function myError(response) {
        //Error
    });
});

我在上面写了一个示例代码。我在通过$http获取数据时添加了节点和边缘。

我想创建另一个控制器，该控制器将对不同的主机进行另一次$http，并将新节点/边附加到现有图形中。

在控制器之间共享 cy 变量以允许操作图形的最佳方法是什么？

此外，我注意到我必须在mySuccess范围内编码，以确保图形不会变得未定义。这变得难以管理和混乱。我应该采用任何特定的编码约定来规避这一点吗？

Angular 为每个

控制器创建一个$scope对象。我们还有一个可从每个控制器访问$rootScope。但是，我们可以从一个控制器访问另一个控制器的$scope吗？排序答案是否定的。此外，如果我们的应用程序需要访问另一个控制器的$scope，我们可能做错了什么，我们需要重新思考我们的问题。但无论如何，如果我们将其存储在服务中，则可以访问另一个控制器的$scope

我试着举个例子，希望能帮助你理解。请使用$http服务更改您的要求

<!doctype html>
<html ng-app="app">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
    <script src="app.js"></script>
</head>
<body>
<div ng-controller="OneController">
    <h2>OneController</h2>
    <button ng-click="buttonClick()">
        buttonClick on current scope
    </button>
    <button ng-click="buttonClickOnTwoController()">
        buttonClick on TwoController's scope
    </button>
</div>
<div ng-controller="TwoController">
    <h2>TwoController</h2>
    <button ng-click="buttonClick()">
        buttonClick on current scope
    </button>
    <button ng-click="buttonClickOnOneController()">
        buttonClick on OneController's scope
    </button>
</div>
</body>
</html>

和应用程序.js

var app = angular.module('app', []);
app.run(function ($rootScope) {
    $rootScope.$on('scope.stored', function (event, data) {
        console.log("scope.stored", data);
    });
});
app.controller('OneController', function ($scope, Scopes) {
    Scopes.store('OneController', $scope);
    $scope.variable1 = "One";
    $scope.buttonClick = function () {
        console.log("OneController");
        console.log("OneController::variable1", Scopes.get('OneController').variable1);
        console.log("TwoController::variable1", Scopes.get('TwoController').variable1);
        console.log("$scope::variable1", $scope.variable1);
    };
    $scope.buttonClickOnTwoController = function () {
        Scopes.get('TwoController').buttonClick();
    };
});
app.controller('TwoController', function ($scope, Scopes) {
    Scopes.store('TwoController', $scope);
    $scope.variable1 = "Two";
    $scope.buttonClick = function () {
        console.log("TwoController");
        console.log("OneController::variable1", Scopes.get('OneController').variable1);
        console.log("TwoController::variable1", Scopes.get('TwoController').variable1);
        console.log("$scope::variable1", $scope.variable1);
    };
    $scope.buttonClickOnOneController = function () {
        Scopes.get('OneController').buttonClick();
    };
});
app.factory('Scopes', function ($rootScope) {
    var mem = {};
    return {
        store: function (key, value) {
            $rootScope.$emit('scope.stored', key);
            mem[key] = value;
        },
        get: function (key) {
            return mem[key];
        }
    };
});

你也可以看到它在这里运行

你可以看到在控制台中放出

正确的方法是将细胞景观对象包装在service中。该服务应实现向图形添加/删除边缘和其他操作的方法。然后，可以将该服务注入到任何控制器（或其他服务）中。这有一个额外的好处，因为它是一个应用程序范围的singleton。

关于实现服务的细节以及角度服务、工厂和提供者之间的区别，你可以检查这个线程。

相关文章：