LINT 在 $scope.method = function method(){...} 上失败

Question

我仍在尝试了解前端的东西 arround angular。 我正在使用 yeaman 生成器来创建 angular / gulp 项目。

这是我的问题：

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

它运行，但我想阻止 LINT 警告。如何？我理解该消息，但如果我按照上述方式进行更换，我只会收到错误消息。

这是来自上述文件的代码。

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

这是打开对话框的控制器 函数 userController($scope, $mdDialog, $document) {

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.

            });
        };
    }
}

如果我将上述方法更改为 $scope.close = ... 我阻止了 LINT 中的警告，但对话框方法不再起作用。

任何提示...？ 问候 n00n

Answer 1

按照 LINT 的指示更改代码：

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

并更改模板以匹配代码：

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

由于对话控制器是使用controllerAS 语法实例化的，因此模板需要包含该语法使用的标识符'vm'。