如何在angularjs的自定義指令內部定義自定義過濾器?
今天下班碰到之前的小學妹,看她今天很是煩躁,我們就溝通了一下,原來是上學的時候沒有學好AngularJS,有很多不懂的問題,她問了我一個問題,就是怎麼使用自定義過濾器? 一聽到這個問題,我就有得說了,我就給她寫了個案例,基本的使用方法。
其實自定義的過濾器很強大,功能很多,所以我們公司一直有在使用,所以我們團隊的人都應該會對它挺了解的,今天就來說說怎麼去用它。
1、首先你要很清楚地知道 該用什麼去定義一個自定義過濾器?
app.filter(name, fn):用於定義一個自定義過濾器
其中 name:過濾器名稱 fn:過濾器處理函式
2 咱們就用一個案列來分析一下
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/lib/AngularJS/angular.min.js"></script> </head> <body> <div ng-controller="myCtrl"> <div ng-bind="name"></div> <div ng-bind="name | myfilter"></div> </div> <script> var app = angular.module("myApp", []); app.filter("myfilter", function() { /* * 過濾器中,直接return function(value) {} * 通過閉包函式來實現資料處理,固定語法結構! * value引數:第一個引數,用於接收要處理的資料:資料就是過濾器管道符前面變數中的資料 */ return function(value) {/*閉包函式中的value就是過濾器接收到的資料|就是準備過濾的資料*/ /* * 這一部分主要是用來進行資料處理的 */ value = value.toUpperCase(); /* 過濾器中資料處理完成,一定要返回輸出*/ return value; } }); app.controller("myCtrl", function($scope) { $scope.name = "jerry"; }); </script>
中間註釋部分都有解釋,應該就會一目瞭然,要記得最後一定要返回輸出
比較常見的就是運用自定義過濾器還原首字母大小寫,還有陣列去重之類的,如果大家有需要,可以看看~
祝大家開心度過每一天~
相關推薦
如何在angularjs的自定義指令內部定義自定義過濾器?
今天下班碰到之前的小學妹,看她今天很是煩躁,我們就溝通了一下,原來是上學的時候沒有學好AngularJS,有很多不懂的問題,她問了我一個問題,就是怎麼使用自定義過濾器? 一聽到這個問題,我就有得說了,
vue全域性自定義指令和區域性自定義指令
除了預設設定的核心指令 (v-model 和 v-show),Vue 也允許註冊自定義指令。 區域性自定義指令(只針對元件內的元素) 父元件app.vue <template> <div id="app">
AngularJs自定義指令詳解(5) - link
演示 hang cursor off drag font 雙向 事件 date 在指令中操作DOM,我們需要link參數,這參數要求聲明一個函數,稱之為鏈接函數。 寫法: link: function(scope, element, attrs) { // 在這裏操作DO
AngularJs學習筆記(4)——自定義指令
ref 告訴 ack 生命周期 .com bsp ctrl 參數變量 ng- 對指令的第一印象:它是一個自定義標簽! 先來看一個簡單的指令: <!doctype html> <html ng-app="myApp"> <head>
angularJS中如何寫自定義指令
module ren gif 發送郵件 www amp 提前 ras instance 指令定義 (轉自http://www.cnblogs.com/huangshikun/p/7060787.html) 對於指令,可以把它簡單的理解成在特定DOM元素上運行的函數,指令
Angularjs進階筆記(2)-自定義指令中的數據綁定
粘貼 文章 發送 制作 取值 不同的 過多 簡單 也會 Angularjs進階筆記(2)-自定義指令中的數據綁定 有關自定義指令的scope參數,網上很多文章都在講這3種綁定方式實現的效果是什麽,但幾乎沒有人講到底怎麽使用,本篇希望聊聊到底怎麽用這個話題。 一. 自定義
AngularJS自定義指令directive:父類scope和指令中scope之間的通訊
我們知道angularJs中,指令中有scope,父類controller中也有scope,兩者的通訊方式有三中,分別是 scope:false;直接使用父類的scope scope:true;繼承父類的scope scope:{@,=,&}隔離的s
AngularJS自定義指令directive:scope屬性
一、介紹: 在AngularJS中,除了內建指令如ng-click等,我們還可以自定義指令。自定義指令,是為了擴充套件DOM元素的功能。程式碼中,通過指定directive中的restrict屬性,來決定這個指令是作為標籤(E)、屬性(A)、屬性值(C)、
angularjs自定義指令
app.directive('nameunique', function($http) { return { require: 'ngModel',//require代表另一個指令的名字,它將會作為link函式的第四個引數
angularJs自定義指令的三種繫結策略
angularJs中指令scope隔離域中有3種繫結策略: .directive("test",function(){ return { scope:{
angularjs的自定義指令及其呼叫方式
<body ng-app="myApp"> <runoob-directive></runoob-directive> <script> var a
AngularJS自定義指令標籤
建立一個模組 var app = angular.module('app', []);建立一個簡單指令標籤app.directive('alert', function(){ return { template: '<div class="alert">
angularJS學習之路(十八)---自定義指令執行過程
angularJS中對指令的解析與執行過程是這樣的: · 瀏覽器得到 HTML 字串內容,解析得到 DOM 結構。 · ng 引入,把 DOM 結構扔給 $compile 函式處理
angularJS學習之路(三十)---自定義指令---templateUrl
第一種寫法: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&
angularJs自定義指令父子指令通訊
老規矩,先上效果圖:首先說一下本文的重點:1、父指令如何呼叫子指令中的方法;2、子指令如何呼叫父指令中的方法;(都不是通過廣播的方式)如果有同學還不知道父指令如何通過[email protected]&給子指令傳遞引數,或者一些其他自定義指令的屬性(scop
AngularJS 優雅的自定義指令
學習要點 為什麼使用指令 建立自定義指令 使用jqLite工作 一、為什麼使用自定義指令 NG內建了許多自定義指令,但是它們有時並不能滿足你的要求,這是需要我們建立自定義屬性。 二、自定義
angularJS 自定義指令
angularJS 自定義屬性 類似於過濾器filter,內建了許多方法同時可以自定義方法。 通過angular.model來建立模組物件: -angular.model: controlle
AngularJs自定義指令詳解
定義指令的方法:angular.module('myApp', []) .directive('myDirective', function () { // 指令定義放在這裡 }); 第一個引數,指令的名字myDirective 用來在檢視中引用特定的指令。第二
angularjs 1.x自定義指令之控制器與指令間的通訊
一、在指令中呼叫控制器裡定義的方法 //html <div ng-controller="MyCtrl"> <loader howToLoad="loadData
angular創建自定義指令的四種方式
htm mil 成功 評論 utf-8 例如 angularjs size 限制 angular除了內置的部分指令,還可以通過.directive來自定義指令。要調用自定義指令,HTML 元素上需要添加自定義指令名。使用駝峰法來命名一個指令:nsHeader,在調用時使