AngularJS - Директива внутри компонента неправильно связывает вещи - PullRequest
Новая
       7

AngularJS - Директива внутри компонента неправильно связывает вещи

0 голосов
/ 26 декабря 2018

Я переработал одну директиву как компонент.Проблема, с которой я столкнулся, состоит в том, что моя директива содержит другую директиву, которая обрабатывает событие, инициированное в родительской директиве.Все вещи работали хорошо, прежде чем я изменил объявление родительской директивы на компонент.Взгляните:

Директива : 

app.directive("fileChange", function () {
    return {
        restrict: 'A',
        scope: {
            fileChange: '&'
        },
        link: function(scope, element) {
            element.on('change', onChange);

            scope.$on('destroy', function () {
                element.off('change', onChange);
            });

            function onChange() {
                scope.$apply(function () {
                    scope.fileChange();
                });
            }
        }
    };
});

Компонент : 

app.component('myComponent', {
    templateUrl: 'myComponent.html',
    bindings: {
        imgSource: '@imgSrc'
    },
    controller: () => {
        function upload() {
            // doing something
            }

        this.upload = upload;
    }
});

Шаблон : 

<div>
    <img alt="image" class="img-preview" ng-src="{{$ctrl.imgSource}}"/>  
    <label class="btn">
        <input type="file" accept="image/jpeg" file-change="$ctrl.upload();"/>
        Choose image
    </label>
</div>

Итак, кажется, $ctrl.upload() не запускает событие или что-то в этом роде.Что я делаю не так?

1 Ответ

0 голосов
/ 26 декабря 2018

Это должно работать 

app.component('myComponent', {
    templateUrl: 'myComponent.html',
    bindings: {
        imgSource: '@imgSrc'
    },
    controller: function () {
        function upload() {
            // doing something
            }

        this.upload = upload;
    }
});

Проблема заключается в том, как вы используете короткий синтаксис функции стрелки, взгляните на документацию

Если вы хотите использоватькороткий синтаксис это может быть 

  controller() {
  },

Но следующий синтаксис предназначен для функций с оператором возврата 

elements.map(function(element) { 
  return element.length; 
}); // [8, 6, 7, 9]

elements.map(element => {
  return element.length;
}); // [8, 6, 7, 9]

Пока вы ничего не возвращаете в свой контроллер, поэтому он ничего не передает как контроллер компонента

...