Angular使用操作事件指令ng-click傳多個參數(shù)示例

更新時間：2018年03月27日 11:28:50 作者：郭浩326

這篇文章主要介紹了Angular使用操作事件指令ng-click傳多個參數(shù),結(jié)合實例形式分析了AngularJS事件指令及相關(guān)的響應(yīng)、處理操作技巧,需要的朋友可以參考下

本文實例講述了Angular使用操作事件指令ng-click傳多個參數(shù)功能。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>www.dhdzp.com angular ng-click用于操作事件的指令</title>
  <script src="angular.min.js"></script>
  <!--
    事件指令：Angular封裝的用于操作事件的指令
    通常是ng-[event]來命名指令，如ng-click表示單擊事件
    Angular中的事件處理，需要將處理函數(shù)掛載到對應(yīng)控制器的$scope上
  -->
</head>
<body>
  <div ng-controller="myCtrl">
    <button ng-click="fn1()">點擊執(zhí)行</button>
    <button ng-click="fn2($event)">點擊執(zhí)行，附帶事件對象$event</button>
    <button ng-click="fn2($event, 'tom')">點擊執(zhí)行，多個參數(shù)</button>
  </div>
<script>
  var app = angular.module("myApp", [])
    .controller("myCtrl", ["$scope", function($scope) {
      $scope.fn1 = function() {
        alert("事件執(zhí)行");
      }
      $scope.fn2 = function(event,name) {
        console.log("事件執(zhí)行了.", event, name);
      }
    }]);
</script>
</body>
</html>

運行效果如下：

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對大家AngularJS程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

AngularJS2中一種button切換效果的實現(xiàn)方法（二）
這篇文章主要介紹了AngularJS2中一種button切換效果的實現(xiàn)方法（二）,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-03-03
AngularJs IE Compatibility 兼容老版本IE
本文主要介紹AngularJs IE Compatibility 兼容老版本IE的問題及解決辦法，有興趣的小伙伴可以參考下
2016-09-09
AngularJs1.x自定義指令獨立作用域的函數(shù)傳入?yún)?shù)方法
今天小編就為大家分享一篇AngularJs1.x自定義指令獨立作用域的函數(shù)傳入?yún)?shù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
angularjs 源碼解析之scope
$scope 的使用貫穿整個 Angular App 應(yīng)用,它與數(shù)據(jù)模型相關(guān)聯(lián),同時也是表達(dá)式執(zhí)行的上下文.有了 $scope 就在視圖和控制器之間建立了一個通道,基于作用域視圖在修改數(shù)據(jù)時會立刻更新 $scope,同樣的 $scope 發(fā)生改變時也會立刻重新渲染視圖.
2016-08-08
詳解@angular/cli 改變默認(rèn)啟動端口兩種方式
這篇文章主要介紹了詳解@angular/cli 改變默認(rèn)啟動端口兩種方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
Angularjs中UI Router全攻略
這篇文章主要介紹了Angularjs中UI Router全攻略，涉及到angularjs ui router的基本用法，需要的朋友參考下吧
2016-01-01
AngularJs中 ng-repeat指令中實現(xiàn)含有自定義指令的動態(tài)html的方法
今天用angular寫table的時候，遇到了一個問題。在ng-repeat中，含有動態(tài)的html，而這些html中含有自定義指令，怎么實現(xiàn)呢？下面小編給大家分享AngularJs中 ng-repeat指令中實現(xiàn)含有自定義指令的動態(tài)html的方法，一起看看吧
2017-01-01
ng-alain的sf如何自定義部件的流程
這篇文章主要介紹了ng-alain的sf如何自定義部件,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-06-06
AngularJS仿蘋果滑屏刪除控件
前端開發(fā)中，為了對列表項進(jìn)行快捷操作，有時就添個按鈕來簡單實現(xiàn)。但是，有時會發(fā)現(xiàn)按鈕影響美觀，甚至影響列表行的布局。稍在網(wǎng)上搜索無果，而寫此仿蘋果滑屏刪除控件
2016-01-01
angular內(nèi)容投影詳解
這篇文章主要為大家介紹了angular內(nèi)容投影，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12