外部テンプレートを使用して$ mdDialogを定義したng-clickは動作しません

Question

$ mdDialogではじめて動作します。外部HTMLテンプレートを使用してダイアログを作成するために使用されています。

これまでのところ、とてもうまくいっています...作品テンプレートは開かれますが、HTMLのクリックはもうできません。

私はそれの理由を見つけることができません。

<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'); 
    } 

} 

あなたはそれがthetセットアップそれ少しオフに表示され、ダイアログコントローラ

Answer 2

の$スコープにあなたのfuncsを割り当てる必要があります。実際、このダイアログにスコープを渡したいと思うようです。 $mdDialog docsでの例から取った私は、あなたがこのパターンに一致するように実装を変更する必要がありますように見えます...

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

次を見つけることができました。指定されたscopeとpreserveScopeオプション次...

$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.'; 
}); 

お知らせをお試しください。あなたのコードを残して

// 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; 

後に追加する必要が変更されていません。

もう一つの方法は、第1の方法は