Question

我仍然试图了解角度的前端东西。我正在使用yeaman生成器创建角度/吞咽项目。

这是我的问题：

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

这是打开对话框的控制器 function 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'。

LINT在$ scope.method = function method（）{...}上失败

1 个答案: