제 3 자 초기화로 인한 각도 변경

각도가 새롭고 단순한 각형 어플리케이션에는 문제가 없지만 이제는 타사 구성 요소와 통합하려고합니다. 내가하려는 일을 달성하기위한 몇 가지 단점을 생각해 볼 수는 있지만 일반적 요구 사항에 대한 깨끗한 해결책, 즉 "외부"각도에서 각도 코드를 호출하는 방법을 선호합니다.제 3 자 초기화로 인한 각도 변경

각진 응용 프로그램이 시작보기를 초기화하고 타사 소프트웨어가 초기화 될 때까지 기다렸다가 각도가 주보기로 표시되기를 원합니다. 타사 소프트웨어는 다양한 비동기 호출을 통해 초기화되며, 극단적 인 경우에는 2 ~ 2 초 정도 걸릴 수 있습니다. 준비가되었을 때 호출 될 콜백 함수를 제공합니다.

그래서 지금 내가 가지고 효과 시뮬레이션 :

.controller('MySplash', ['$scope', '$location', '$q', 
          function($scope, $location, $q) { 

     $scope.waitForInit = $q.defer(); 

     $scope.waitForInit.promise.then(function() { 
      $location.path('/tab/MyMainView'); 
     }); 

     $scope.waitForInit.resolve(); // fake the post-init triggering 
    }])

그래서이 시작 화면을 보여줍니다 및 이연이 만족 될 때 즉시 발생 물론이 경우, 메인 화면을 보여줍니다.

또한 타사 소프트웨어

CalledWhenThirdPartyReady() { 
     // put some code here 
}

그리고 개념에 내가하고 싶은 모든이 콜백에

CalledWhenThirdPartyReady() { 
     $scope.waitForInit.resolve(); 
}

기본적를 그 해결의 전화를 이동입니다

, 내 퍼즐에서 제공하는 기능을 가지고 효과적으로 독립 실행 형 인 일부 코드를 DI에 액세스하는 방법입니다. 개념에서 내가하고자하는 것은 각도 서비스를 호출하거나 각도 변수에 액세스하는 것입니다. 내가 run 메소드가 호출 될 것이다 내가 주입 변수에 액세스 할 거라고 생각하는 것은

CalledWhenThirdPartyReady() { 

     angular.module('myApp') 

    .run(["$rootScope", "$location", 
       function ($rootScope, $location) { 
       // just to show access to DI-ed variables 
       console.log("Run in module", $rootScope, ",", $location); 

      }]); 
}

의이 종류를 시도했다, 그러나 나는 실행을 등록하고 있습니다 때문에 추측 트리거 결코 극복 RUN() 너무 늦었 어.

출처

2014-02-16 djna

$apply을 사용하여 시도 :

가

$ 적용() 각 프레임 워크의 외부로부터 각도에서 발현을 실행하는 데 사용된다. (예 : 브라우저 DOM 이벤트, setTimeout, XHR 또는 타사 라이브러리). 우리가 을 호출하기 때문에 우리는 적절한 범위 수명주기 인 예외 처리, 시계 실행을 수행해야합니다. 예를 들어

CalledWhenThirdPartyReady() { 
    $scope.$apply($scope.waitForInit.resolve()); 
}

이 CalledWhenThirdPartyReady는 $scope에 액세스 할 수 있어야는, 예를 들어, 그것은 당신의 controller 내부에 정의되어있는 경우. 각도 응용 프로그램 외부에서 CalledWhenThirdPartyReady을 정의해야하는 경우 다른 방법으로 처리해야합니다.

var app = angular.module('myApp', []); 

app.controller('MySplash', ['$scope', '$location', '$q', 
    function($scope, $location, $q) { 

    $scope.waitForInit = $q.defer(); 

    $scope.waitForInit.promise.then(function() { 
     console.log('Resolved.'); 
    }); 

    $scope.resolve = function() { 
     $scope.waitForInit.resolve(); 
    } 
    } 
]);

않은 HTML :

JS :

예는 외부로부터 controller에 함수를 호출

가

<body ng-controller="MySplash"> 
</body> 

<script type="text/javascript"> 
    window.onload = function() { 

    console.log('Loading.'); 
    window.setTimeout(function() { 
     var controllerScope = angular.element(document.querySelector('body')).scope(); 
     controllerScope.resolve(); 
    }, 1000); 
    } 
</script>

출처

2014-02-16 09:28:21 tasseKATT

고마워요. 정확히 내가하고 싶은 개념입니다. 문제는 내가 $ scope 변수에 접근하지 못하는 것입니다. 귀하의 코드를 시도하고 $ 범위는 알려진 변수가 아닙니다. 내 제한된 이해에서 나는 그것을 주입 할 필요가있을 것으로 기대하고, 나는 "외부"코드에서 그것을하는 방법을 모른다. – djna

CalledWhenThirdPartyReady()를 이동하고 컨트롤러 내부에서 제 3 자에게 전화를 걸 수 있습니까? – tasseKATT

아니, 그게 문제 야. 타사 코드는 JavaScript 파일을로드하여 시작되며 초기화 된 전역 CalledWhirdPartyReady() 함수를 다시 호출 할 것을 약속합니다. 그래서 저는 "안쪽"각도에서 통제 할 수 없습니다. – djna

tasseKATT 주어진 링크를 상기 외부의 일반 원리를 준다 상호 작용, 특히 DOM을 통한 각도 엔트리 포인트의 탐색.

결국 나는 모듈에 속성을 추가하는 접근법을 사용하여 효과적으로 모듈을 내 응용 프로그램 간의 통신을위한 스크래치 패드로 사용합니다. (I 글로벌을 사용하는 것보다 약간 더 나은 것 같아요.)

을 내 컨트롤러 모듈 : 각도 사이의 경쟁 조건이 있습니다

angular.module('starter.controllers', []) 


.controller('PetSplashCtrl', ['$scope', '$location', '$q', 
         function($scope, $location, $q) { 

    var initDeferred = $q.defer(); 
    angular.module('starter.controllers').initDeferred = initDeferred; 

    initDeferred.promise.then(function() { 
     $location.path('/tab/pets'); 
    }); 

}]);

및 타사 콜백에서

이

angular.module('starter.controllers').initDeferred.resolve();

추가 thirdPartyCode, 그래서 각도를 준비했는지 확인하고 resolve()를 호출하기 전에 Promise를 설정해야했습니다.

function thirdPartyCallback(){ 

var initWaiter = function(){ 

    if (typeof angular !== 'undefined' 
       && angular.module('starter.controllers') 
       && angular.module('starter.controllers').initDeferred 
     ){ 
     angular.module('starter.controllers').initDeferred.resolve(); 
     console.log("init done"); 

    } else { 
     console.log("init wait"); 
     setTimeout(initWaiter, 1000); 
    }    
}; 

initWaiter(); 

}

DOM을 통한 서비스를 조회하는 것이 이보다 나은지 여부는 확실하지 않습니다.

출처

2014-02-16 12:53:37 djna

제 3 자 초기화로 인한 각도 변경

답변

관련 문제