angularjs 自定义: (过滤器,指令,服务)

最新推荐文章于 2018-09-07 10:40:03 发布

wizard333

最新推荐文章于 2018-09-07 10:40:03 发布

阅读量364

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/wizard333/article/details/78224894

6 篇文章

订阅专栏

本文介绍如何在 AngularJS 中创建自定义指令、过滤器和服务。包括如何限制指令的调用方式，创建用于字符串反转的过滤器，以及提供数字转换服务的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义指令

通过添加 restrict 属性,并设置值为 "A",
 来设置指令只能通过属性的方式来调用:

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {

return {

restrict : "A",

template : "<h1>自定义指令!</h1>"

};

});

<div runoob-directive></div>

restrict 值可以是以下几种:

restrict 默认值为 EA,
 即可以通过元素名和属性名来调用指令。

自定义过滤器
（现有项目里 app 要替换成 myApp 并且放在 app.controller 外）

app.filter('reverse', function() { //可以注入依赖 

return function(text) {

return text.split("").reverse().join("");

}

});

{{ msg | reverse }}

自定义服务

app.service('hexafy', function()
 {

    this.myFunc = function (x) {

        return x.toString(16);

}

});

使用自定义的的服务 hexafy 将一个数字转换为16进制数:

app.controller('myCtrl', function($scope, hexafy)
 {

    $scope.hex = hexafy.myFunc(255);

});

在过滤器 myFormat 中使用服务 hexafy:

app.filter('myFormat',['hexafy', function(hexafy)
 {

    return function(x)
 {

        return hexafy.myFunc(x);

};

}]);

angularjs 可以 copy对象

$scope.master = {firstName: "John", lastName: "Doe"};

$scope.user = angular.copy($scope.master);