![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
angularjs
前端小狮
can you feel my world . . . . . .
展开
-
angular中自定义过滤器显示html代码
我们会用到$sce服务的trustAsHtml方法来实现转换。因为这个功能具有一定通用性,我们可以通过angularJS的过滤器来简化开发,这样只写一次,调用的时候就非常方便了,看代码:修改base.js// 定义模块:var app = angular.module(“pinyougou”,[]);/$sce服务写成过滤器/app.filter(‘trustHtml’,['sce′,function(sce',function(sce′,function(sce){return functi转载 2020-11-25 17:17:01 · 219 阅读 · 0 评论 -
点击input,checkbox,先判断再赋值是选中否
点击input checkbox,复选框先判断再决定选中否,可以用event.preventDefault(); 阻止默认事件,再手动赋值;angular 阻止checkbox默认事件,<label> <input type="checkbox" ng-click="changeState($event)" ng-checked="checkState"> </label>//js$scope.check.原创 2020-09-01 15:33:32 · 648 阅读 · 0 评论 -
ng-class使用自定义方法
ng-class,因为判断的条件,维度多,难以用常见的几种用法实现,可以定义一个方法实现ng-class=“setMyClass(t)” ,js里面判断完 返回样式就可以;<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="http://cdn.sta原创 2020-08-05 16:12:29 · 264 阅读 · 0 评论 -
$state.reload带参数
$state.reload刷新当前路由可以带参数var myParam = {value:1,id:2};$state.reload("app.myIndex",{param:}); //关键时候用的到原创 2020-06-19 15:53:23 · 750 阅读 · 0 评论 -
angular子路由,父路由公共变量赋值,调用
场景:父路由 app.parent子路由 app.parent.childA 、app.parent.childB在父路由 定义一个变量 $scope.myValue = 1 ;子路由里面都需要用到 $scope.myValue ,并且需要 修改,但是页面并没有改变,没有起到作用。解决(父路由定义个对象,需要用到的变量放到对象可解决); //app.parent $scope.parentObj = { myValue:1 } //app.parent.childA $s.原创 2020-05-19 16:32:45 · 619 阅读 · 0 评论 -
angularjs指令之间的数据交互
指令可以通过独立作用域接收数据, 使用=,如app.directive('myDirective', function() { return { restrict: 'E', transclude: true, scope: { option: '=option' //key相同时也可以使用option: '=' }, template:...转载 2020-01-13 09:46:48 · 188 阅读 · 0 评论 -
Angular中$broadcast和$emit的使用方法
要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递,同时使用$on来接收事件并作出响应。broadcast译为广播,即上级传递下级。示例代码:<script src="../angular.js"></script><script>angular.module("app", []) .cont...转载 2019-08-20 17:07:00 · 541 阅读 · 0 评论 -
angular的directive简易模糊搜索指令
简易例子,可仿写使用//html<div class="wth100 qb-wrap" ng-controller="cqTestCtr"> <!--引用1--> <div class="wd240 ht-t40"> <search-select class="wth100" search="searchObj4">&l...原创 2019-08-01 09:12:42 · 235 阅读 · 0 评论 -
跟我学AngularJs:Directive指令用法解读(下)
8.transclude如果不想让指令内部的内容被模板替换,可以设置这个值为true。一般情况下需要和ngTransclude指令一起使用。 比如:template:"hello every ",这时,指令内部的内容会嵌入到ng-transclude这个div中。也就是变成了hello every 这是指令内部的内容。默认值为false;这个配置选项可以让我们提取包含在指令那个元素里面的内容,再...转载 2019-07-24 09:44:17 · 149 阅读 · 0 评论 -
跟我学AngularJs:Directive指令用法解读(上)
本教程使用AngularJs版本:1.5.3AngularJs GitHub: https://github.com/angular/angular.js/AngularJs下载地址:https://angularjs.org/摘要: Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一。它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性,并且...转载 2019-07-24 09:36:50 · 242 阅读 · 0 评论 -
在Angular外部使用js调用Angular控制器中提供的函数方法或变量
在Angular外部使用js调用Angular控制器中提供的函数方法或变量 var appElement = document.querySelector('[ng-controller="controller_name"]'); var $scope = angular.element(appElement).scope(); ...原创 2019-05-17 20:54:24 · 745 阅读 · 0 评论 -
angular中的ng-class多条件判断的用法
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="http://cdn.static.runoob.com/libs/angu原创 2018-04-04 16:52:33 · 9136 阅读 · 0 评论 -
angular过滤器filter常用方法,自定义过滤器
简单介绍AngularJS过滤器filter用法,每个都将列出用法代码以便加深了解;内置过滤器:currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序) 用法: 1.currency(货币) 使用cur...原创 2018-04-12 15:55:00 · 16008 阅读 · 1 评论 -
AngularJS的$destory用法
在controller中监听$destory事件,这个事件会在路由发生跳转的时候触发。 用法:$scope.$on("$destroy", function() { //清除配置,不然scroll会重复请求 })常用到的地方是,在页面建立计时器的时候,跳转其它页面,这个计时器依然还在执行,第二次进入这个页面,会重复创建计时器,所以就需要这个方法,监听离开当前路由的时候,销...原创 2018-04-20 15:29:28 · 2854 阅读 · 1 评论 -
My97DatePicker与angular一起使用时,监测不到值的变化
在input 上添加onchange="",大部分浏览器可解决,但ie有部分版本还是不能监测,解决方式:<input class="Wdate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',onpicked:function(){$(this).trigger('change')}})" type="text" ...原创 2018-07-10 14:12:37 · 666 阅读 · 0 评论 -
angular directive 入门
angular directive 入门“控制器应该尽可能保持短小精悍,而在控制器中进行DOM操作和数据操作则是一个不好的实践。”“设计良好的应用会将复杂的逻辑放到指令和服务中。通过使用指令和服务,我们可以将控制器重构成一个轻量且更易维护的形式” ...转载 2018-07-07 10:59:04 · 10454 阅读 · 0 评论 -
angular路由ui-router路由嵌套,多视图,ocLazyLoad,写法,简易代码
直接撸代码,此demo目的只是实现功能,用法;简易demo目录 //index.html<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <scrip原创 2018-08-10 10:52:56 · 575 阅读 · 0 评论 -
AngularJS解决ng-if中的ng-model值无效的问题
与其他指令一样, ng-if 指令也会创建一个子级作用域,因此,如果在 ng-if 指令中添加了元素,并向元素属性增加 ng-model 指令,那么 ng-model 指令对应的作用域属性子级作用域,而并非控制器注入的 $scope 作用域对象,这点在进行双向数据绑定时,需要引起注意, $parent 可以解决。<!DOCTYPE html> <html ng-app="m...转载 2018-12-20 15:26:13 · 1605 阅读 · 0 评论 -
angularjs[ngRepeat:dupes]
最近在开发过程中,发现一个问题,在使用angularjs的ng-repeat遍历过程中,如果遍历的数组中包含相同的项,则会抛错。<!DOCTYPE html><html ng-app="myApp"><head> <meta charset="UTF-8"> <title>测试</title&a转载 2019-01-22 15:32:57 · 971 阅读 · 0 评论 -
AngularJS中重新加载当前路由页面
这个问题同样困扰我很久,网上的回答五花八门,全都不能解决;终于在网上找很久,看到某大神的解决办法,作此分享;成功解决使用ui-router重新加载当前页面的问题。原创 2017-08-30 16:29:40 · 23341 阅读 · 0 评论