LINT schlägt auf $ scope.method = function method() {...}

Question

Ich versuche immer noch, das Frontend-Zeug arround eckig zu verstehen. Ich benutze einen yeaman Generator, um eckige Projekte zu erstellen.

Das ist mein Problem:

PS P:\projects\trax> gulp test 
[19:35:22] Using gulpfile P:\projects\trax\gulpfile.js 
[19:35:22] Starting 'scripts'... 
[19:35:30] 
P:\projects\trax\src\app\components\head\user\menu.dialog.controller.js 
    7:9 error "vm" is defined but never used                   no-unused-vars 
    10:5 error You should not set properties on $scope in controllers. Use controllerAs syntax and add data to "this" angular/controller-as 
    14:5 error You should not set properties on $scope in controllers. Use controllerAs syntax and add data to "this" angular/controller-as 
    18:5 error You should not set properties on $scope in controllers. Use controllerAs syntax and add data to "this" angular/controller-as 

✖ 4 problems (4 errors, 0 warnings) 

[19:35:30] all files 14.79 kB 
[19:35:30] Finished 'scripts' after 7.75 s 
[19:35:30] Starting 'test'... 
28 11 2017 19:35:33.855:WARN [proxy]: proxy "\base\src\assets\" normalized to "\base\src\assets\/" 
28 11 2017 19:35:35.077:WARN [watcher]: Pattern "P:/projects/trax/src/**/*.mock.js" does not match any file. 
PhantomJS 1.9.8 (Windows 8 0.0.0): Executed 1 of 1 SUCCESS (0.032 secs/0.34 secs) 
[19:35:38] Finished 'test' after 8.1 s 

Es läuft, aber ich möchte die LINT Warnungen verhindern. Wie? Ich verstehe die Nachricht, aber wenn ich wie erwähnt ersetze, bekomme ich nur Fehler.

Dies ist der Code aus der genannten Datei.

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

function MenuDialogController($scope, $mdDialog) { 

    var vm = this; 


    $scope.close = function close(){ 
     $mdDialog.hide(); 
    } 

    $scope.cancel = function cancel(){ 
     $mdDialog.hide(); 
    } 

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

Und dies ist der Controller den Dialog Funktion Usercontroller ($ Umfang, $ mdDialog, $ document) Öffnen {

var vm = this; 

     vm.user = { 
      name: 'Test User' 
     }; 

     vm.showMenu = function showMenu(ev){ 
      $mdDialog.show({ 
       controller: "MenuDialogController", 
       controllerAs: 'vm', 
       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. 

      }); 
     }; 
    } 
} 

Wenn ich die Methoden ändern, wie erwähnt zu $ scope.close = ... Dann verhindere ich die Warnung in LINT, aber die Dialoge Methoden wollen nicht mehr funktionieren.

Irgendein Hinweis ...? Grüße n00n

Answer 1

Ändern Sie den Code wie durch die LINT gerichtet:

function MenuDialogController($scope, $mdDialog) { 

    var vm = this; 

    ̶$̶s̶c̶o̶p̶e̶.̶c̶l̶o̶s̶e̶ ̶=̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶c̶l̶o̶s̶e̶(̶)̶{̶ 
    vm.close = function close(){ 
     $mdDialog.hide(); 
    } 

und die Template ändern Sie den Code entsprechen:

<md-dialog-actions> 
    ̶<̶m̶d̶-̶b̶u̶t̶t̶o̶n̶ ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶c̶l̶o̶s̶e̶(̶)̶"̶ ̶c̶l̶a̶s̶s̶=̶"̶m̶d̶-̶p̶r̶i̶m̶a̶r̶y̶"̶>̶C̶l̶o̶s̶e̶ ̶D̶i̶a̶l̶o̶g̶<̶/̶m̶d̶-̶b̶u̶t̶t̶o̶n̶>̶ 
    <md-button ng-click="vm.close()" class="md-primary">Close Dialog</md-button> 
</md-dialog-actions> 

Da der Dialog-Controller instanziiert mit controllerAS Syntax ist, Die Vorlage muss den von dieser Syntax verwendeten Bezeichner 'vm' enthalten.