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 ...
随机推荐
- BroadcastReceiver几种常见监听
1.BroadcastReceiver监听拨号 <intent-filter android:priority="1000" > <action android: ...
- 深入理解javascript函数参数与闭包（一）
在看此文章,希望先阅读关于函数基础内容 函数定义与函数作用域 的章节,因为这篇文章或多或少会涉及函数基础的内容,而基础内容,我放在函数定义函数作用域 章节. 本文直接赘述函数参数与闭包,若涉及相关知识 ...
- 学习笔记 HTTP参数污染注入
HTTP参数污染注入源于网站对于提交的相同的参数的不同处理方式导致. 例如: www.XX.com/a?key=ab&key=3 如果服务端返回输入key的值,可能会有 一: ab 二:3 三 ...
- AC算法学习笔记
1.算法流程图 (1) void Init() 此函数是初始化函数,用来给fail数组和goto数组初始化值. (2) void GotoFunction(string x) 这个函数的作 ...
- AngularJS 系列 01 - HelloWorld和数据绑定
目录导读: AngularJS 系列 学习笔记 目录篇 前言: 好记性不如烂键盘,随笔就是随手笔记,希望以后有用. 本篇目录: 1. Hello World 2. AngularJS中的数据绑定 3. ...
- Oracle数据库的 增、删、改、查
有时候数据库的查询语句一时想不起来,或不确定是不是语句写的正确,现在整理了一下标准的基本查询语句,便于以后牢记: .数据操作语言 DML:添加(insert into).修改(update set ...
- Shell中字符串分割的三种方法
问题:对于’1,2,3,4,5’这样的字符串输出采用,分隔开的1 2 3 4 5 特征:在字符串中没有空格 解决方法1: #!/bin/bash var=’1,2,3,4,5’ var=${var// ...
- OpenWRT镜像爬虫搭建本地源
网上的爬虫不能用,还是先表达谢意,不过我比较懒不喜欢重复写别人写的教程,只贴出修改,怎么用自己看教程吧. 我自己改了一版可以正常爬: #!/usr/bin/env python #coding=utf ...
- linux分区机制（MBR GPT）简介
- 【FLUENT案例】03：冲蚀
1 引子2 问题描述3 模型准备4网格5模型设置6 材料设置7 设定注入器8 修改材料9 Cell zone Conditions设置10 边界条件设置10.1 inlet入口设置10.2 出口设置1 ...