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>