다른 컨트롤러에 $ http 데이터 공유 및 $ http 호출 모듈화

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 범위 내부를 코딩해야한다고 언급했습니다. 이것은 관리하기 어렵고 지저분 해집니다. 이 문제를 회피하기 위해 채택해야하는 특정 코딩 규칙이 있습니까?

출처

2016-07-12 Park Taecyeon

그래서 전역 변수와 같은 것을 원합니까? [$ rootScope] (https://docs.angularjs.org/api/ng/service/$rootScope)를 사용하는 것이 하나의 가능성입니다. – KRONWALLED

각도는 각 컨트롤러에 대해 하나의 $ scope 개체를 만듭니다. 우리는 또한 모든 컨트롤러로부터 $ rootScope를받을 수 있습니다. 그러나 다른 컨트롤러에서 한 컨트롤러의 $ 범위에 액세스 할 수 있습니까? 종류 대답은 아니오입니다. 또한 우리 응용 프로그램이 다른 컨트롤러의 $ 범위에 액세스해야하는 경우, 우리는 아마도 잘못된 것을하고 있으며 우리는 문제를 다시 생각할 필요가 있습니다. 하지만 어쨌든 다른 컨트롤러의 $ 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>

를 사용하여 귀하의 요구 사항에 따라 코드를 변경하고 app.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]; 
     } 
    }; 
});

당신은 또한 here

당신이 콘솔

에 넣어 밖으로 볼 수있는 실행 볼 수 있습니다

출처

2016-07-12 10:28:14

관련없는 질문이 있는데, 전/html로 데이터를 전달해야 할 때마다 항상 $ scope를 사용했습니다. $ scope.var와 같이 컨트롤러 내에서 저항하는 일반 변수를 선언해야합니까? var myVar로 충분합니까? –

또 다른 질문, 다른 컨트롤러의 내용에 액세스하는 것이 잘못된 경우 어떤 코딩 규칙을 채택해야합니까? –

질문에 따라 "그래프를 조작 할 수 있도록 컨트롤러간에 cy 변수를 공유하는 가장 좋은 방법은 무엇입니까?" 컨트롤러를 통해 변수를 공유하고 싶습니다. 그 이유는 diff 컨트롤러의 여러 변수와 값을 단일 객체에 넣을 수있는 예제를 제공 한 이유입니다. –

올바른 접근법은 service에 cytoscape 개체를 래핑하는 것입니다. 서비스는 그래프에 가장자리 및 기타 조작을 추가/제거하는 메소드를 구현해야합니다. 서비스는 모든 컨트롤러 (또는 다른 서비스)에 주입 될 수 있습니다. 이것은 응용 프로그램 전체에 대한 추가 혜택을 singleton 있습니다.

서비스 구현 및 각도 서비스, 공장 및 제공 업체의 차이점에 대해서는 thread을 확인할 수 있습니다.

출처

2016-07-12 12:09:22 kpentchev

다른 컨트롤러에 $ http 데이터 공유 및 $ http 호출 모듈화

답변

관련 문제