首页 > 代码库 > angular.js小知识总结
angular.js小知识总结
angular-watch.html 代码如下:
<script> var app = angular.module(‘app‘,[]); app.controller(‘ctrl‘,function($scope){ $scope.init = { price : 20,//单价 count : 5, //数量 money : 3 //运费 }; $scope.a = 0; $scope.$watch(‘init.count‘,function(newVal,oldVal){ console.log(newVal + ‘:‘ + oldVal); $scope.a = newVal > 10 ? 0: $scope.init.count * $scope.init.money; },true);//第三个参数 $scope.sum = function(){ return $scope.init.price * $scope.init.count; } }); </script> 单价 : <input type="text" ng-model="init.price"/><br /><br /> 数量 : <input type="number" ng-model="init.count"/><br /><br /> 总价 : {{sum()}}<br /><br /> 运费 : {{a}}
angular-filter 代码如下:
<script> var app = angular.module(‘app‘,[]); app.run([‘$routeScope,$filter‘,function($routeScope,$filter){ $routeScope.a = 12; $routeScope.name = $filter(‘number‘)(123456789); }]) </script>
angula-drag 代码如下:
<!DOCTYPE html><html ng-app="app"> <head> <meta charset="UTF-8"> <title></title> <style> #box { width: 100px; height: 100px; background: salmon; position: absolute; top: 0; left: 0; } </style> </head> <body> <script src=http://www.mamicode.com/"js/jquery.3.1.1.js"></script> <script src=http://www.mamicode.com/"js/angular.min.js"></script> <script> var app = angular.module(‘app‘, []); app.directive(‘myDrag‘, function() { return { link: function(scope, element, attr) { element.on(‘mousedown‘, function(ev) { var This = $(this); var disX = ev.clientX - $(this).offset().left; var disY = ev.clientY - $(this).offset().top; }); $(document).on(‘mousemove‘, function() { This.css({ left: ev.clientX - disX, top: ev.clientY - disY }) }) $(document).on(‘mouseup‘,function(){ $(document).off(); }) }, restrict: ‘A‘ } }) </script> <div id="box" my-drag></div> </body></html>
angular-disabled 代码如下:
<script> var app = angular.module(‘app‘,[]); var timer; app.controller(‘ctrl‘,function($scope,$interval){ $scope.iNum = 5; $scope.isDisabled = true; timer = $interval(function(){ $scope.iNum--; if ($scope.iNum == 0) { $interval.cancel(timer); //取消定时器 $scope.isDisabled = false; } },1000); }); </script> <div ng-controller="ctrl"> <input type="button" ng-disabled="isDisabled" value=http://www.mamicode.com/"{{iNum}}"/> </div>
angular-directive 代码如下:
<!DOCTYPE html><html ng-app="app"> <head> <meta charset="utf-8" /> <title></title> <style> p{ width: 300px; height: 300px; border: 1px solid saddlebrown; display: none; } .on{ background: red; } </style> <script src=http://www.mamicode.com/"js/angular.min.js"></script> <script src=http://www.mamicode.com/"js/jquery-1.9.1.js"></script> <script> var app = angular.module(‘app‘,[]); app.controller(‘ctrl‘,function($scope){ $scope.data = [ {title:‘新闻‘,"con":‘新闻‘}, {title:‘娱乐‘,"con":‘娱乐‘}, {title:‘体育‘,"con":‘体育‘} ]; $scope.data2 = [ {title:‘八卦‘,"con":‘八卦‘}, {title:‘军事‘,"con":‘军事‘}, {title:‘农业‘,"con":‘农业‘} ]; }); app.directive(‘myTab‘,function(){ return{ link:function(scope,element,attr){ element.delegate(‘input‘,‘click‘,function(){ $(this).attr(‘class‘,‘on‘).siblings(‘input‘).attr(‘class‘,‘‘); $(this).siblings(‘p‘).eq($(this).index()).show().siblings(‘p‘).hide(); }); }, //element.delegate : 事件委托 restrict:‘ECMA‘, replace:true, //scope:true, scope:{ myId : ‘@‘, //随便起个名字 //@ : 针对字符串 //= : 针对数据和变量 myData:‘=‘ },//隔离控制器0 templateUrl:‘tpl.html‘ } }) </script> </head> <body ng-controller="ctrl"> <div> <my-tab my-id="div1" my-data=http://www.mamicode.com/"data"></my-tab> <my-tab my-id="div2" my-data=http://www.mamicode.com/"data2">{{name}}</my-tab> </div> </body></html>
angular-anchorScroll 代码如下:
<!DOCTYPE html><html ng-app="app"> <head> <meta charset="UTF-8"> <title></title> <style> #box div{ width: 200px; height: 300px; border: 1px solid red; margin-bottom: 20px; } #box ul{ position: fixed; top: 20px; right: 20px; } #box ul li{ width: 150px; height: 30px; border: 1px solid red; text-align: center; list-style: none; margin-top: -1px; } </style> <script src=http://www.mamicode.com/"js/angular.min.js"></script> <script> var app = angular.module(‘app‘,[]); app.controller(‘ctrl‘,function($scope,$location,$anchorScroll){ $scope.arr = [1,2,3,4,5,6]; $scope.show = function(id){ $location.hash(id); //hash()设置地址栏里的信息,可以设置也可以获取 $anchorScroll(); //清空上次执行的 //在执行一次 } }) </script> </head> <body ng-controller="ctrl"> <div id="box"> <ul> <li ng-repeat="id in arr" ng-click="show(‘div‘ + id)">div{{id}}</li> </ul> <div ng-repeat="id in arr" id="div{{id}}">div{{id}}</div> </div> </body></html>
angular-bootstrap 代码如下:
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> p{ width: 200px; height: 200px; border: 1px solid salmon; text-align: center; line-height: 200px; } </style> </head> <body> <script src=http://www.mamicode.com/"js/angular.min.js"></script> <script> var app = angular.module(‘app1‘,[]); var app = angular.module(‘app2‘,[]); app.controller(‘ctrl1‘,function($scope){ $scope.a = 30; }); app.controller(‘ctrl2‘,function($scope){ $scope.b = 20; }); var oDiv = document.getElementsByTagName(‘div‘); angular.element(document).on(‘click‘,function(){ angular.bootstrap(oDiv[0],[‘app1‘]); angular.bootstrap(oDiv[1],[‘app2‘]); //参数 模块定义给谁,模块名 //手动开启angular应用模式 }) </script> <div ng-controller="ctrl1">{{a}}</div> <div ng-controller="ctrl2">{{b}}</div> </body></html>
cachFactory 代码如下:
<!DOCTYPE html><html ng-app="app"> <head> <meta charset="UTF-8"> <title></title> <script src=http://www.mamicode.com/"js/angular.min.js"></script> <script> var app = angular.module(‘app‘,[]); app.controller(‘ctrl‘,function($scope,$cacheFactory){ var cache = $cacheFactory(‘myCache‘,{capacity:3}); //capacity:2 限制size的个数 //默认删除第一条 cache.put(‘name‘,‘lily‘); cache.put(‘age‘,‘20‘); cache.put(‘sex‘,‘women‘); //cache.remove(‘name‘); //info() 当前这条详细信息 console.log(cache.get(‘name‘)); //console.log(cache.info()); }) </script> </head> <body ng-controller="ctrl"> </body></html>
$loaction
<!DOCTYPE html><html ng-app="mk"> <head> <meta charset="UTF-8"> <title></title> <script src=http://www.mamicode.com/"js/angular.min.js"></script> <script> var app = angular.module(‘mk‘,[]); app.controller(‘ctrl1‘,function($scope,$location){ $scope.url = ‘http://www.baidu.com#/path/abd?news=123456&user=name&pass=123‘; var a = $location.hash(‘hi‘); var b = $location.search(‘name=rose‘); console.log($location.url());//相对路径 : /path/abd?news=123456&user=name&pass=123 console.log($location.absUrl());//绝对路径 : http://127.0.0.1:8020/%E5%A4%8D%E4%B9%A0/$location.html#/path/abd?news=123456&user=name&pass=123 console.log($location.host());//主机名 : 127.0.0.1 console.log($location.port());//端口号 : 8020 console.log($location.search());//数据 : Object {news: "123456", user: "name", pass: "123"} console.log($location.path());//盘符 : /path/abd console.log($location.protocol());//协议 : http }) </script> </head> <body ng-controller="ctrl1"> </body></html>
angular.js小知识总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。