2013-05-03 2 views
0

나는 이미 anwser를 검색하려고했는데 ... 막혔습니다.AngularJS, jQuery ajax 요청은 항상 두 번 (클릭) 요청해야합니다.

컨트롤러간에 통신을 시도합니다 (http://onehungrymind.com/angularjs-communicating-between-controllers/).

나를 위해 잘 작동합니다.

다음 단계에서 나는 컨트롤러에 보내야하는 ajax 요청을 추가하려고 시도했다.

요청은 업무를 수행하지만 불행히도 항상 두 번째 요청에만 적용됩니다.

AJAX-요청

var request = $.post("http://www.mydomain.com/search.php", { data: "" }); 
    request.done(function(data) { 
     sharedService.prepForBroadcast(data); 
    }); 
}; 

이 문제점은 무엇을하려고?

JAVASCRIPT

var myModule = angular.module('myModule', []); 
myModule.factory('mySharedService', function($rootScope) { 

    var sharedService = {}; 
    sharedService.message = ''; 

    sharedService.prepForBroadcast = function(msg) { 
     this.message = msg; 
     this.broadcastItem(); 
    }; 

    sharedService.broadcastItem = function() { 
     $rootScope.$broadcast('handleBroadcast'); 
    }; 

    return sharedService; 
}); 

function Controller($scope, sharedService) { 

    $scope.handleClick = function() { 

     var request = $.post("http://www.mydomain.com/search.php", { data: "" }); 
     request.done(function(data) { 
      sharedService.prepForBroadcast(data); 
     }); 
    }; 

    $scope.$on('handleBroadcast', function() { 
     $scope.message = 'zero: ' + sharedService.message; 
    }); 
} 

function ControllerOne($scope, sharedService) { 
    $scope.$on('handleBroadcast', function() { 
     $scope.message = 'ONE: ' + sharedService.message; 
    });   
} 

function ControllerTwo($scope, sharedService) { 
    $scope.$on('handleBroadcast', function() { 
     $scope.message = 'TWO: ' + sharedService.message; 
    }); 
} 

Controller.$inject = ['$scope', 'mySharedService'];   
ControllerOne.$inject = ['$scope', 'mySharedService']; 
ControllerTwo.$inject = ['$scope', 'mySharedService']; 

HTML

<script type='text/javascript' src="http://code.angularjs.org/angular-1.0.0rc9.js"></script> 
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> 

<body ng-app="myModule"> 

    <div ng-controller="Controller"> 
     <button ng-click="handleClick();">read json</button> 
    </div> 

    <div ng-controller="ControllerOne"> 
     <input ng-model="message" > 
    </div> 

    <div ng-controller="ControllerTwo"> 
     <input ng-model="message" > 
    </div> 

감사합니다.

+0

왜 AJAX 요청에 jQuery를 사용합니까? Angular는 정확하게 동일하고 나머지 각도와 잘 통합되는'$ http' 서비스를 제공합니다. – TheHippo

답변

8

문제는 코드가 "AngularJS world"외부에서 실행된다는 것입니다. 정확하기 위해서는 양방향 데이터 바인딩을 트리거해야하는 외부 이벤트가 AngularJS $ digest 루프를 트리거해야합니다. 이에 대한 자세한 내용은 http://docs.angularjs.org/guide/concepts을 참조하십시오. AngularJS와 $http 서비스에 찬성

  1. 드롭 jQuery를 아약스 :

    지금, 특정 문제에 돌아오고, 당신은이 개 솔루션을 가지고있다. 이것은 쉽게이고, 선호하는 솔루션이다 좋네요 : JQuery와 호출이

를 완료하지만 실제로는, 그냥 가자 때 from jquery $.ajax to angular $http

  • 는이 $ 루프를 소화 트리거 $scope.$apply 방법에 전화를 감싸 jQuery의 ...

  • +5

    +1하지만 "정말로, 그냥 jQuery를 놓으십시오 ..." – TheHippo

    +0

    고마워요. 나는 $ http를 사용할 것이다. 이것은 나를 위해 작동합니다. – Maik

    관련 문제