AngularJS와 실행 지침 컨트롤러 두 번째

Question

나는이 (간체 버전)와 같은 중첩 된 UI 뷰와 AngularJS와 응용 프로그램이 :

main.html

<div id="page-wrapper"> 
    <div ui-view=""></div> 
</div> 

그리고 내 설정 : 내가 모달 팝업 업을 처리하는 지시어를 사용 할 때까지

.... 
    $urlRouterProvider.otherwise('/'); 
    $urlRouterProvider.when('', '/'); 

    $stateProvider 
     .state('dashboard', { 
      url: '', 
      templateUrl: 'views/main.html' 
     }) 
     .state('dashboard.home', { 
      url: '/', 
      controller: 'HomeController as home', 
      templateUrl: 'views/home.html' 
     }) 
     .... 

다 괜찮 았는데.

subscription.directive.js

angular 
    .module('adminConsoleApp') 
    .directive('modalDetail', modalDetail); 

function modalDetail() { 
    var directive = { 
     restrict: 'EA', 
     scope: { 
      modalContainer: '=?', 
      callbackbuttonleft: '&ngClickLeftButton', 
      callbackbuttonright: '&ngClickRightButton' 
     }, 
     templateUrl: 'scripts/directives/subscription/modal.subscription.template.html', 
     transclude: true, 
     controllerAs: 'home', 
     controller: 'HomeController', 
     bindToController: true 
    }; 

    return directive; 

나는 또한 내 컨트롤러 내부의 모든 기능은 실제로 두 번 실행되고 있는지주의 : 이것은 내 지시어이다. 그리고 물론 controllerAs이 필요합니다. stateProvider가 컨트롤러의 별칭을 참조하고 지시어 템플릿이 컨트롤러의 별칭을 사용하기 때문입니다. 이 구성을 사용하면 HomeController이 두 번 실행되지만, controllerAs을 제거하면 지시문이 작동하지 않지만 컨트롤러는 한 번만 실행됩니다. 이것은 내 컨트롤러 인스턴스의 console.log(this);입니다 : 당신이 발견하는 경우

console log for 'this' instance

, 첫 this 내 초기 컨트롤러 인스턴스를 참조하십시오. 지시어 참조가있는 객체의 두 번째 것입니다. 는 이미 같은 가장 일반적인 솔루션 다음 : 여러 지침 인스턴스 나에 대한

검사

유일한 참조

• 제거 ng-controller PARAM와/수동 부트 스트랩없이
• 요소 div 내부를 I 아직 시도하지 않았다. 직접 지시문 내부에 지시자 모달을위한 컨트롤러 논리를 래핑하는 것이다 (나는 의미한다 : controller: HomeController의 사용을 피하고 새로운 것을 정의한다). 하지만 컨트롤러를 두 번 돌리는 것을 피하기 위해 솔루션을 실제로 적용 할 수 있는지 알고 싶습니다.

  참고 :이 동작은 성가신 일이지만, 두 번째 호출 후에는 정상적으로 작동합니다. 필자는 지시어가 컨트롤러를 두 번 실행하지 않도록하는 훌륭한 솔루션을 알고 싶습니다.

Answer 1

해결 : 대신 가정용 컨트롤러 지시문을 무시하고 대신 다른 컨트롤러를 사용하십시오. 이런 식으로 :

function modalDetail() { 
    var directive = { 
     restrict: 'EA', 
     scope: { 
      modalContainer: '=?', 
      callbackbuttonleft: '&ngClickLeftButton', 
      callbackbuttonright: '&ngClickRightButton' 
     }, 
     templateUrl: 'scripts/directives/subscription/modal.subscription.template.html', 
     transclude: true, 
     controller: function() { 
      // your implementation here 
     } 
    }; 

    return directive; 

} 

물론 params 템플릿 참조를 변경하여 작동하게하십시오.

Answer 2

동일한 각도의 모든 컨트롤러는 독립적 인 인스턴스입니다. 귀하의 컨트롤러 기능은 컨트롤러 생성자입니다.

한 번만 실행해야하는 모든 코드는 run 및 config 블록 (및 모든 종류의 캐시를 사용하여 ui-router 및 서비스의 mb 해결)을 배치해야합니다.

상황에 따라 두 번 컨트롤러 코드가 실행되는 것을 피할 수 없습니다.