Question

这是我的指示：

module app.directives {

    interface IDmDeleteIconController {
        doAction(): void;
    }

    class DmDeleteIconController implements IDmDeleteIconController {

        static $inject = ['$scope'];
        constructor(public $scope:any) {
        }

        doAction() {
            console.log('1');
            this.$scope.dmAction();
        }
    }

    export class DmDeleteIcon implements ng.IDirective {

        templateUrl = './app/common/directives/deleteIcon/deleteIcon.html';
        controller = DmDeleteIconController;
        controllerAs = 'dmDeleteIconVm';

        scope = {
            dmAction: '&'
        };

        link = (scope: any, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrl: any) => {
            console.log('2');
            scope.dmAction();
        }

        static factory(): ng.IDirectiveFactory {
            const directive = () => new DmDeleteIcon();
            directive.$inject = [];
            return directive;
        }
    }

    angular.module('myApp').directive('dmDeleteIcon', DmDeleteIcon.factory());
}

我在这里尝试使用它：

dm-delete-icon(dm-action="console.log('hello');")

当我打开页面时，我会在控制台中获取2（来自link函数），但是我没有从我传递给指令的函数中获取hello

为什么以及如何解决？

更新：

这是一个指令模板：

a.item-detail-delete-icon(class="form-image-link" href="" ng-click="dmDeleteIconVm.doAction()")

这是我的Jade编译的HTML：

<dm-delete-icon dm-action="console.log('hello');"></dm-delete-icon>

更新2：

我试图像这样使用它：

<dm-delete-icon dm-action="vm.foo()"></dm-delete-icon>

其中：

    foo(): void {
        console.log("hello");       
    }

控制器中的功能。

更新3：

如果我尝试调试此代码，我会得到这个：

Answer 1

这里的问题是你要向指令传递一个表达式console.log('hello');，它将在父控制器范围内执行。

这基本上意味着您需要将console对象附加到作用域，并在该对象下附加方法log。

表示角度表达式不适用于全局变量（在本例中为console）。

只需确保传递给指令的表达式是有效的角度表达式，并且该表达式应该有效。例如 - 在名为myConsoleLog的应用程序范围上创建新方法，该方法将某些内容输出到控制台并将指令的属性值更改为dm-action="myConsoleLog();"

将函数传递给指令

1 个答案: