如何在angularjs的自定義指令內部定義自定義過濾器？

阿新 • • 發佈：2019-01-21

今天下班碰到之前的小學妹，看她今天很是煩躁，我們就溝通了一下，原來是上學的時候沒有學好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，在調用時使

如何在angularjs的自定義指令內部定義自定義過濾器？

相關推薦