LINT не работает с $scope.method = function method(){}

Я все еще пытаюсь понять, что такое внешний интерфейс вокруг 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();
    }
}

А это контроллер, открывающий диалог 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


person n00n    schedule 28.11.2017    source источник


Ответы (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', используемый этим синтаксисом.

person georgeawg    schedule 28.11.2017
comment
спасибо ... Я часто ищу дни, чтобы исправить проблемы, изучая angular. Больше я таких мелочей не вижу... - person n00n; 30.11.2017