angular服务一
angular服务
[$apply()]
- jquery内数据绑定
- 要用$apply(),不然不能在js内通过angular绑定数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtr">
{{name}}
</div>
<script src="angular.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<script>
var app = angular.module("myApp", [])
app.controller('myCtr', ["$scope",function($scope){
setTimeout(function(){ //jquery定时器
$scope.name="奔波霸"; //jquery内数据绑定
$scope.$apply(); //要用$apply(),不然不能在js内通过angular绑定数据
},1000);
}]);
</script>
</body>
</html>
$window
- $timeout,相当于js中的setTimeout
- $interval,相当于js中的setInterval
- $window,相当于js中的window
- cancle方法用来消除定时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtr">
{{id}}
<p ng-click="getWin()">getWin</p>
<p>{{clientHeight}}</p>
<p>{{scrollHeight}}</p>
<p>{{scale}}</p>
<p>{{hero}}</p>
</div>
<script src="angular.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<script>
var app = angular.module("myApp", [])
app.controller('myCtr', ["$scope","$timeout","$interval","$window",function($scope,$timeout,$interval,$window){
$scope.id=1;
var id = $interval(function(){ //$interval,相当于setInterval，赋值给一变量，便于下面清除
$scope.id++;
if($scope.id>5){
$interval.cancel(id); //清除定时，相当于clearInterval
}
},1000);
$scope.getWin = function(){
$scope.clientHeight = $window.document.body.clientHeight; //$window,相当于js中的window
$scope.scrollHeight = $window.document.body.scrollHeight;
$window.confirm("要关闭所有标签页吗？");
$window.alert("德玛西亚");
$scope.scale = $window.prompt("惊天破");
}
var lol = $timeout(function(){ //$timeout,相当于setTimeout，赋值给一变量，便于下面清除
$scope.hero="炼金术士";
},1000);
$timeout.cancel(lol); //清除定时，相当于clearTimeout
}]);
</script>
</body>
</html>
$sce服务
- 将html标签通过angular渲染到网页中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtr">
{{data}}
<p ng-bind-html="data"></p> <!--将数据按html格式渲染-->
<p ng-bind-html="pill | trustHtml"></p> <!--将数据按html格式渲染,调用过滤器-->
</div>
<script src="angular.min.js"></script>
<script>
var app = angular.module("myApp", [])
app.filter("trustHtml", ["$sce", function($sce){ //写个自定义过滤器，便于以后调用$sce服务
return function(data){
return $sce.trustAsHtml(data);
}
}])
app.controller('myCtr', ["$scope","$sce",function($scope,$sce){
$scope.data=$sce.trustAsHtml("<h1>德玛西亚</h1>"); //$sce服务，信任html（由于安全考虑，angular默认不信任html）
$scope.pill="<h1>德玛西亚</h1>";
}]);
</script>
</body>
</html>
$cacheFactory服务
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtr">
{{data}}
</div>
<div ng-controller="youCtr">
{{data}}
</div>
<script src="angular.min.js"></script>
<script>
var app = angular.module("myApp", [])
app.controller('myCtr', ["$scope","$cacheFactory",function($scope,$cacheFactory){
var obj = $cacheFactory("scale"); //创建表，存放内容
obj.put("王者荣耀", {hero:"兰林王", number:"微信2区"}); //put方法存放内容
$scope.data=obj.get("王者荣耀").hero; //get方法获取内容
// obj.remove("王者荣耀"); //删除"王者荣耀"
// obj.removeAll(); //删除所有
// obj.destroy(); //删除表
console.log(obj.get("王者荣耀"));
}]);
app.controller('youCtr', ["$scope","$cacheFactory",function($scope,$cacheFactory){
var obj = $cacheFactory.get("scale"); //共享上面创建的表，这样就可以共享缓存中的内容了
$scope.data = obj.get("王者荣耀").hero;
}]);
</script>
</body>
</html>
angular服务一的更多相关文章
- angular服务二
angular服务 $http 实现客户端与服务器端异步请求 get方式 test.html <!DOCTYPE html> <html lang="en"> ...
- angular 服务 service factory provider constant value
angular服务 服务是对公共代码的抽象,由于依赖注入的要求,服务都是单例的,这样我们才能到处注入它们,而不用去管理它们的生命周期. angular的服务有以下几种类型: 常量(Constant): ...
- 理解 Angular 服务
理解 Angular 服务 本文写于 2021 年 3 月 29 日 理解 Angular 服务 什么是服务 服务写法 原理简述 提供服务 1. 在服务中注册 2. 在 module 中注册 3. 在 ...
- angular 服务
在Angular里面,services作为单例对象在需要到的时候被创建,只有在应用生命周期结束的时候(关闭浏览器)才会被清除.而controllers在不需要的时候就会被销毁了.服务用于在控制器之间进 ...
- Angular服务的5种创建方式
config配置块 Angular应用的运行主要分为两部分:app.config()和app.run(),config是你设置任何的provider的阶段,从而使应用可以使用正确的服务,需要注意的是在 ...
- Angular 服务的简单使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- angular服务
angular创建服务的五种方式: factory() factory()方法是创建和配置服务的最快捷方式.factory()函数可以接受两个参数. name(字符串)需要注册的服务名. ge ...
- angular 服务之间依赖注入
import { Injectable } from '@angular/core'; @Injectable() export class LoggerServiceService { constr ...
- Angular定义服务-Learn By Doing
1.服务(Service)介绍 Angular services are substitutable objects that are wired together using dependency ...
随机推荐
- ArrayList LinkedList源码解析
在java中,集合这一数据结构应用广泛,应用最多的莫过于List接口下面的ArrayList和LinkedList; 我们先说List, public interface List<E> ...
- BPM实例分享——日期自动计算
日期自动计算 在请假流程中通常我们需要获得请假开始到请假结束时间的天数,那么请假天数(可结合工作日历)是怎么实现系统计算呢?下面我们来看下配置的方法. 1. 首选建立业务服务BPMService, ...
- Android Weekly Notes Issue #229
Android Weekly Issue #229 October 30th, 2016 Android Weekly Issue #229 Android Weekly笔记, 本期内容包括: 性能库 ...
- 转载一篇React native的props的用法
注:默认值如何设置 http://www.tuicool.com/articles/uMfYv2q
- Oracle学习笔记十 使用PL/SQL
PL/SQL 简介 PL/SQL 是过程语言(Procedural Language)与结构化查询语言(SQL)结合而成的编程语言,是对 SQL 的扩展,它支持多种数据类型,如大对象和集合类型,可使用 ...
- 使用fdisk给新增加硬盘分区
1.使用fdisk创建6个分区[1P+1E(5L)] //dev/sdb1 /dev/sdb5 /dev/sdb6 /dev/sdb7 /dev/sdb8 /deb/sdb9 [root@serv ...
- MySQL学习笔记
数据库 P3306create database [if not exists] db_name [characterset gbk];use database;//跳转数据库show databas ...
- 浏览器js与css文件有缓存未更新致最新版本
这是由于编码人员频繁更改引入的资源文件,浏览器中存在缓存,当你清空浏览器缓存也无济于事时可以采用在资源文件尾部加?_MM(MM为随机参数)即可强制更新资源文件.
- 2.lvm动态逻辑卷
Lvm动态逻辑卷 一． 基本概念 LVM 把实际的物理磁盘数据映射到一个简单而灵活的虚拟逻辑存储视图上,藉以控制磁盘资源: 也就是重新考虑了管理文件系统和卷的方法,在文件系统管 ...
- vsftpd安装配置 530 Permission denied.错误
yum install vsftpd service vsftpd start 530 Permission denied.错误 /etc/vsftpd/user_list 该文件里的用户账户在 ...