사용자 정의 ng-click 외부 템플릿이있는 $ mdDialog가 작동하지 않습니다.

Question

이 $ mdDialog로 처음으로 작업했습니다. 외부 HTML 템플릿을 사용하여 대화 상자를 만드는 데 사용되었습니다.

지금까지는 너무 좋았습니다 ... 템플릿을 열 수는 있지만 ng-click은 더 이상 작동하지 않습니다.

그리고 그 이유를 찾을 수 없습니다.

<md-icon 
     layout="row" 
     flex md-font-set="material-icons" 
     class="active" 
     ng-click="vm.showMenu($event)"> 
    menu 
</md-icon> 

userController에 $ mdDialog을 열 수있는 방법 :

mdDialog이 같은 userController에서 호출되는

vm.showMenu = function showMenu(ev){ 

    $mdDialog.show({ 
     controller: MenuDialogController, 
     templateUrl: 'app/components/head/user/menu.dialog.html', 
     parent: angular.element($document.body), 
     targetEvent: ev, 
     clickOutsideToClose:true, 
     fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints. 
    }) 
     .then(function(answer) { 
      $scope.status = 'You said the information was "' + answer + '".'; 
     }, function() { 
      $scope.status = 'You cancelled the dialog.'; 
     }); 
}; 

을 그리고 이것은 대화 상자에서 버튼에 대한 대화 컨트롤러 작동하지 않습니다 :

angular 
    .module('trax') 
    .controller('MenuDialogController', MenuDialogController); 

function MenuDialogController() { 

    var vm = this; 

    vm.close = function close(){ 
     alert('close clicked'); 
    } 

    vm.ok = function ok(){ 
     alert('ok clicked'); 
    } 

} 

그리고 이것은 dia의 html 코드입니다. logController :

<md-dialog aria-label="User Menu"> 
    <form ng-cloak> 
     <md-toolbar> 
      <div class="md-toolbar-tools"> 
       <h2>User Menu</h2> 
       <span flex></span> 
       <md-button class="md-icon-button" ng-click="vm.close($event)"> 
        <md-icon md-font-set="material-icons">close</md-icon> 
       </md-button> 
      </div> 
     </md-toolbar> 

     <md-dialog-content> 
      <div class="md-dialog-content"> 
       <h2>Dialog Title</h2> 
       <p>Dialog Text....</p> 
       <p ng-click="vm.test($event)">test</p> 
      </div> 
     </md-dialog-content> 

     <md-dialog-actions layout="row"> 
      <md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" md-autofocus> 
       More on Wikipedia 
      </md-button> 
      <span flex></span> 
      <md-button ng-click="vm.close($event)"> 
       cancel 
      </md-button> 
      <md-button ng-click="vm.ok($event)"> 
       ok 
      </md-button> 
     </md-dialog-actions> 
    </form> 
</md-dialog> 

ng-clicks가 작동하지 않습니다!

나에게 어떤 힌트가 있습니까?

Answer 1

angular 
    .module('trax') 
    .controller('MenuDialogController', MenuDialogController); 

function MenuDialogController() { 

    var vm = this; 

    //Here change vm to $scope 
    $scope.close = function close(){ 
     alert('close clicked'); 
    } 

    $scope.ok = function ok(){ 
     alert('ok clicked'); 
    } 

} 

당신은 그것을 약간 떨어져 당신의 설정을 텟 나타납니다 귀하의 대화 컨트롤러

Answer 2

의 $ 범위에 funcs를 할당해야합니다. 실제로이 대화 상자에 범위를 전달하려는 것 같습니다. 이 패턴과 일치하는 구현을 수정해야합니다 같은

// Dialog #3 - Demonstrate use of ControllerAs and passing $scope to dialog 
//    Here we used ng-controller="GreetingController as vm" and 
//    $scope.vm === <controller instance=""> 

... 나는 다음을 찾을 수 있었다 $mdDialog docs의 예에서 찍은 것 같습니다.

$mdDialog.show({ 
    controller: MenuDialogController, 
    templateUrl: 'app/components/head/user/menu.dialog.html', 
    parent: angular.element($document.body), 
    targetEvent: ev, 
    clickOutsideToClose:true, 
    fullscreen: $scope.customFullscreen, 
    scope: $scope,   // use parent scope in template 
    preserveScope: true, // do not forget this if use parent scope 
}).then(function(answer) { 
    $scope.status = 'You said the information was "' + answer + '".'; 
}, function() { 
    $scope.status = 'You cancelled the dialog.'; 
}); 

공지 지정된 scope 및 preserveScope 옵션을 ... 다음을 시도하십시오. 코드를 떠날

// Since MenuDialogController is instantiated with ControllerAs syntax 
// AND we are passing the parent '$scope' to the dialog, we MUST 
// use 'vm.<xxx>' in the template markup 

Answer 3

은 당신이 당신의 템플릿에서 사용할 수있는이 방법으로

var vm = this; 
$scope.vm = vm; 

와

var vm = this; 

후 추가 할 필요가 수정되지 않은.

또 다른 방법은 첫 번째 방법은