Angular中事件绑定方法的替代方法

时间:2019-05-20 11:33:34

标签: angular

考虑一下,我有10个元素,其类名称为“其他”。现在,我想基于单击这些元素来执行一些操作。在角度上,我需要在所有10个元素标签上编写(单击)事件并调用特定函数。

相反,Angular中存在以下jQuery的方法吗?

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="content-area" ng-app="management">

    <div class="project-table-wrapper" ng-controller="listCtrl">
        <!-- This is the list of the project -->
        <div class="">....</div>
        <a class="btn btn-success btn-addeditproject btn-addproject" ng-click="openAddProjectDialog()" href="javascript:;">
                <i class="fa fa-plus-circle"></i>
                Add Project
        </a>
        
        <div class="search-box">
            <div class="search-input-wrap">
                <input placeholder="Search"
                       type="text"
                       id="searchInput" class="searchInput"
                       data-searchFor="newPro"
                       ng-model="suvery_search" ng-change="liveSearch(suvery_search)" >
                <i class="fa fa-search"></i>
            </div>
            <button class="btn-search searchIt" ng-click="liveSearch(suvery_search)" name="searchIt" value="Go">Go</button>
        </div>
    </div>
    <div ng-controller="addCtrl">
        <div class="search-box">
            <div class="search-input-wrap">
                <input placeholder="Search"
                       type="text"
                       id="searchInput" class="searchInput"
                       data-searchFor="newPro"
                       ng-model="suvery_search" ng-change="liveSearch(suvery_search)" >
                <i class="fa fa-search"></i>
            </div>
            <button class="btn-search searchIt" ng-click="liveSearch(suvery_search)" name="searchIt" value="Go">Go</button>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

您应该使用指令。像这样:

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[directiveSelectorName]'
})
export class ClickActionDirective {
    constructor(el: ElementRef) {
       el.nativeElement.on('click', function(this){
//my action
});
    }
}

请注意,您需要导入ElementRef才能执行与DOM元素相关的操作。