Question

我正在尝试实现自定义指令textareaInput。但我不知道如何为指令实现自定义事件。

代码如下所示。

myApp.directive('textareaInput',function() {
    var textareaInputDir = {};
    textareaInputDir.restrict="E";
    textareaInputDir.replace="true";
    textareaInputDir.templateUrl="../../../views/widget/textarea/textarea-template.html";
    textareaInputDir.scope={};
    textareaInputDir.link=function (scope, jqElement, attrs) {
        scope.elementDefinition={};
        scope.elementDefinition.label=attrs.label;
        scope.elementDefinition.isShow=attrs.isshow;
        scope.elementDefinition.isRequired=attrs.isrequired;
        scope.elementDefinition.isDisabled=(attrs.isdisabled === "true");
        scope.elementDefinition.defaultValue=attrs.defaultvalue;
        scope.keyValue={text:scope.elementDefinition.defaultValue};

    };

    return textareaInputDir;
});

模板html如下所示：

<div>
    <textarea ></textarea>
    <label>
        <small></small>
        <span >*</span>
    </label>
</div>

在视图中我会像下面一样使用它。在下面的例子中。我试图为我的指令添加ng-change事件。我想在控制器someMethod中定义testCtrl。但是发现这个事件将附加到模板的根元素（它是一个div）。因此它没有意义。因为当文本在textarea中更改时，根元素无法知道它。所以我希望指令中定义的所有事件，如ng-change，ng-click等，都可以附加到模板的子元素textarea。有什么方法可以做到吗？感谢。

<form  ng-controller='testCtrl'>
    <textarea-Input label="Project Description" isShow="true" 
    isRequired="true" isDisabled="false" ng-change="someMethod()" ng-click="someClick()"></textarea-Input>

</form>

Answer 1

虽然我自己没有试过这个，但我相信你有一个范围问题。

您需要在指令定义中使用transclude: true，然后在文本区域模板中使用ng - change="someMethod()"，因为您的textarea输入模板可能包含许多能够触发更改事件的元素。您的ng-change属性是否会捕获所有这些属性？

有关详细信息，请查找此"Creating a Directive that Wraps Other Elements" in this long page of Angular JS docs。

这个答案将阐明Angular JS directive scope issue。

Answer 2

首先，您必须通过使其成为范围变量来获取onChange传递的函数。您还可以决定更改事件的名称，例如＆＃34; inputChange＆＃34;避免混淆。然后只需获取textarea元素并将回调绑定到它的更改事件。

myApp.directive('textareaInput',function() {
    var textareaInputDir = {};
    textareaInputDir.restrict="E";
    textareaInputDir.replace="true";
    textareaInputDir.templateUrl="../../../views/widget/textarea/textarea-template.html";
    textareaInputDir.scope= {
        //isolated scope event, better change name anyway
        ngChange: '&' 
    };
    textareaInputDir.link=function (scope, jqElement, attrs) {
        scope.elementDefinition={};
        scope.elementDefinition.label=attrs.label;
        scope.elementDefinition.isShow=attrs.isshow;
        scope.elementDefinition.isRequired=attrs.isrequired;
        scope.elementDefinition.isDisabled=(attrs.isdisabled === "true");
        scope.elementDefinition.defaultValue=attrs.defaultvalue;
        scope.keyValue={text:scope.elementDefinition.defaultValue};

        //get the textarea element
        var inputElement = jqElement.find('textarea');
        //listen for the change event
        inputElement.bind('change', scope.ngChange);

    };

    return textareaInputDir;
});

这应该足以让它发挥作用

为自定义指令编写自定义事件

2 个答案: