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 ...
随机推荐
- C#、JAVA操作Hadoop（HDFS、Map/Reduce）真实过程概述。组件、源码下载。无法解决：Response status code does not indicate success: 500。
一.Hadoop环境配置概述 三台虚拟机,操作系统为:Ubuntu 16.04. Hadoop版本:2.7.2 NameNode:192.168.72.132 DataNode:192.168.72. ...
- 通过CSS的border绘制三角形
通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ...
- DarkTrack 4 Alien Version Released RAT 下载地址&视频教程
不废话,点我下载. 官方论坛:https://forum.darktrack.net 作者脸书:https://www.facebook.com/darktrackrat E安全报道:https:// ...
- 关于JS交互--调用h5页面，点击页面的按钮，分享到微信朋友圈，好友
关于js交互,在iOS中自然就想到了调用代理方法 另外就是下面的,直接上代码了: 如果你的后台需要知道你的分享结果,那么,就在回调里面调用上传到服务器结果的请求即可
- 纯Swift编写的仿“随遇”应用源码
纯Swift编写的仿“随遇”App概述 此项目是为了巩固Swift掌握而编写的,素材均来自“随遇”官方App 用Storyboard+Xib+Autolayout的方式来实现UI部分 由于项目不复杂, ...
- 记录一次Quartz2D学习(六)
(五)内主要讲到了一些图层操作 本次主要讲 图片的裁剪 6图片裁剪 6.1 图片裁剪 TIP: 可能会影响统一图层的显示 - (void)drawRect:(CGRect)rect { CGConte ...
- 记录一次Quartz2D学习(四)
(三)内主要讲了图片与文字的绘制 本次主要讲解 绘制状态的保存与恢复,以及对它的使用 4.绘制状态 4.1 绘制状态的保存与恢复,以及对它的应用 TIP:通过对保存恢复绘制状以及多次的渲染,可以绘制出 ...
- 实时观察Apache访问情况的工具Apachetop
Linux服务器的负载.进程等信息可以通过top命令查看.而Apache的运转如何实时的观察呢?“tail -f”log文件?这是个好方法,但是太累了! 所以,感谢Chris Elsworth为我们提 ...
- easyui表格的增删改查
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- ssl客户端与服务端通信的demo
服务端程序流程 #include <stdio.h> #include <stdlib.h> #include <errno.h> #include <str ...