AngularJS

Question

我重新设计了一个指令作为组件。我遇到的问题是我的指令包含另一个指令，该指令确实处理在父指令中触发的事件。在我将父指令声明更改为组件之前，所有东西都运行良好。看看：

指令:

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() 不会触发事件或类似事件。我做错了什么？

Answer 1

这应该有效

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

        this.upload = upload;
    }
});

问题是你如何使用箭头函数短语法，看看 documentation

如果你想使用短语法，可以是

  controller() {
  },

但以下语法适用于具有 return 语句的函数

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

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

虽然您 return 控制器中没有任何内容，因此它作为组件控制器没有传递任何内容

AngularJS - 组件内的指令未正确绑定内容

AngularJS - Directive inside a component doesn't bind stuff correctly

angularjs-directive