Question

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

指令：

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]

虽然您在控制器中什么也不返回，所以它没有作为组件控制器传递任何信息

AngularJS-组件内部的指令无法正确绑定内容

1 个答案: