AngularJS
关注
分享
扫一扫
文章平均质量分 61
justforuse
做个有情怀的程序员
展开
-
ngModel双向绑定的一些问题
看段代码先：<body><div ng-controller="mainCtrl"> <input id="myText" type="text" ng-model="aa"/> <button ng-click="change();">click me</button> {{aa}}</div><script> angular.module('myApp原创 2015-11-18 17:59:30 · 1978 阅读 · 0 评论 -
使用angular-ui-sortable实现可拖拽排序列表
项目需求，添加列表可拖拽排序功能，谷歌了一下，找到一个Angular的插件：angular-ui-sortable，项目地址：https://github.com/angular-ui/ui-sortable需要在之前引入jquery，和jquery-ui，否则无法使用。我们要做的事情，加载数据，拖拽排序并输出当前顺序：js代码：<script src="../../jquery.js"></scr原创 2016-10-12 21:39:52 · 16746 阅读 · 15 评论 -
Angular解决输入框由禁用状态转可用状态自动获取焦点失效问题
有时为了方便操作，我们会为输入框设置默认焦点。而且会设置输入权限，会禁止用户输入。但是当从禁止输入切换为可输入的时候，输入框却不能设置焦点了。原因的话，我看了一下，估计是当我们改变输入框绑定的值得时候，输入框并没有切换状态，还是禁用状态，所以我们无法设置焦点，就是执行顺序的问题。上代码吧，写个指令，设置输入框焦点。<!DOCTYPE html><html ng-app="app"><head>原创 2016-10-01 20:23:58 · 3701 阅读 · 0 评论 -
（译）理解AngularJS中的Scopes
（初次翻译，有些地方翻译的不准确，还请对照原文理解：https://github.com/angular/angular.js/wiki/Understanding-Scopes）概要AngularJS中，子作用域通常是原型继承自他的父作用域。这个规则的一个例外就是使用了scope:{...} 的指令——这个创建了一个“隔离”的作用域，不是以原型继承的方式（以及使用了transclusion的指令）翻译 2017-01-01 21:25:26 · 644 阅读 · 0 评论 -
Angular使用ng-messages与PHP进行表单数据验证
Angular中的ng-messages提供了更方便的表单数据验证服务。 本文代码主要基于《AngularJS权威教程》中关于ng-messages模块的说明，但原文中不乏错误以及没有后台代码和示例，所以简单的实现其功能。//别的地方也有错误，我一度怀疑我买了盗版书==比如我们想与后台进行表单数据合法性验证并给出输入操作提示HTML代码：<!DOCTYPE html><html lang="原创 2016-12-27 21:23:36 · 766 阅读 · 0 评论 -
AngularJS1.6版本中ui-router路由中/#!/的解决方法
本地编译出的文件可以正常运行，但是服务器编译后到了测试那里路由上就莫名的出现了/#!/，这导致了很多问题。后来查了下是服务器编译器把AngularJS升级到了1.6版本，而我本地的依旧是1.5。但是1.6究竟做了哪些改变呢？可以参考这个：https://github.com/angular/angular.js/commit/aa077e81129c740041438688dff2e8d20c3d7原创 2017-01-14 15:51:35 · 4979 阅读 · 0 评论 -
UI-Grid表格元素中多个空格显示为一个空格的解决办法
UI-Grid中表格数据中如果存在多个连续的空格，会显示为一个空格，解决方法很简单，只需要加上这样一个样式：.ui-grid-cell-contents { white-space: pre !important;}white-space 属性设置如何处理元素内的空白。pre: 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。原创 2017-01-11 20:59:56 · 1927 阅读 · 0 评论 -
AngularJS实现一个HTML元素内容可编辑指令
有时我们想让用户可编辑元素某个属性内容，比如自定义数据名称，所以在此实现一个简易的指令my-editable先看效果吧： 指令代码：.directive('myEditable', function ($timeout) { return { restrict: 'A', require: '?ngModel', templateUrl: "原创 2017-05-27 23:09:41 · 2535 阅读 · 0 评论 -
window.scrollY和scrollX在IE下报错的解决方法
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollY（IE>=9）建议使用window.pageYOffset来代替window.scrollY，使用 window.pageXOffset 代替 window.scrollX原创 2017-07-10 23:21:07 · 4108 阅读 · 0 评论 -
Angular输入框内按下回车会触发其它button的点击事件的解决方法
偶然间遇到的一个八阿哥。解决方法：为button元素添加type="button"参考链接：http://stackoverflow.com/questions/20945834/why-hitting-enter-in-angularjs-forms-text-input-causes-a-side-effect/20946778转载 2016-10-08 22:44:08 · 5733 阅读 · 1 评论 -
下拉列表dropdown取消默认点击隐藏及修复需要二次点击的方法
angular-ui专门为Angular项目提供了dropdown控件，指令形式为uib-dropdown。但是有的时候我们不希望点击下拉框的内容后，下拉框就隐藏。比如，如果下拉框内容是一个折叠列表之类的话，当我们点开列表后下拉框就隐藏了，而此时我们还没有选择我们要选择的元素。基于这种情况，我们需要对下拉框进行更多的控制。我们整体的结构可能是这样的：div(uib-dropdown) bu原创 2016-08-24 22:39:21 · 15182 阅读 · 1 评论 -
AngularJS中 ng-select 实例
参考链接： http://www.tuicool.com/articles/RniIRv代码实例：<html ng-app="myApp"><head> <meta charset="utf-8" /> <script src="angular.js"></script> <script src="angular-messages.js"></script></head><原创 2015-11-06 15:36:29 · 1076 阅读 · 0 评论 -
AngularJS单元测试——karma+mocha配置及实例
参考链接：http://www.tuicool.com/articles/yuMvQz （注：有所修改）什么是Karma？mocha是一个js的测试框架，之前写过的一篇博客介绍了如何用node.js的环境来运行测试。Karma是一个驱动测试的Runner。也就是说，karma为测试框架准备运行环境，可以让这些测试在真正的浏览器里运行。而且，karma运行测试的过程是自动化的。自动化并非理所当然的事原创 2015-12-21 18:35:33 · 2989 阅读 · 1 评论 -
Angular实现一个简单的多选复选框的弹出框指令
之前的文章有写过包含树结构下拉框的。要实现一个包含多个复选框的下拉框该如何做呢？先上个效果图吧： 代码：<!DOCTYPE html><html ng-app="app"><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../bootstr原创 2016-08-28 21:54:46 · 4503 阅读 · 1 评论 -
Angular中使用$watch监听object属性值的变化
Angular中的$watch可以监听属性值的变化，然后并做出相应处理。 常见用法：$scope.$watch("person", function(n, o){ //todo something...})但是对于一个对象中的某个属性值变化时，$watch似乎不管用了。 示例代码：<body> <div ng-controller="mainCtrl"> <in原创 2016-08-18 22:43:39 · 16706 阅读 · 0 评论 -
Angular解决IE和Firefox下button内部元素ng-click事件被屏蔽
如果我们在button元素内部有其它的子元素并且绑定点击事件，比如：而我们的代码是这样的：<body ng-controller="ctrl"> <script> angular.module("app", []) .controller("ctrl", function($scope){ $scope.sayButto原创 2016-09-10 21:24:42 · 3362 阅读 · 0 评论 -
Angular中$broadcast和$emit的使用方法
要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递，同时使用$on来接收事件并作出响应。broadcast译为广播，即上级传递下级。 示例代码：<script src="../angular.js"></script><script>angular.module("app", []) .controller("child", functio原创 2016-08-21 17:36:19 · 32850 阅读 · 5 评论 -
ng-grid中自定义排序方法sortFn
参考链接：http://stackoverflow.com/questions/29740829/sorting-is-not-working-on-ip-address-column-in-ng-gridng-grid字符串默认牌序是字母表出现的先后顺序，如果我们想通过比较字符串的长度来自定义排序方式应该怎么做呢？ 附上示例代码：html文件：<!DOCTYPE html><html n原创 2015-12-30 18:51:15 · 4505 阅读 · 0 评论 -
AngularJS实现网站换肤的简单示例
网站不应该只注重功能，还应该注重用户体验；成熟的大型网站大都具备让用户自行选择主题及颜色的功能，AngularJS也可以做到这点。效果图：原理是使用ng-href来动态为网页更换样式：<link rel="stylesheet" type="text/css" ng-href="{{theme.value}}.css">代码：<!DOCTYPE html><html ng-app="app" ng原创 2016-09-03 12:19:29 · 2660 阅读 · 1 评论 -
使用ng-animate为网页增加动画效果
AngularJS 中提供了ngAnimate模块，可以为网页提供动画效果。典型的应用就是视图切换和元素添加与移除。这里以ui-view 和 ng-repeat指令作为展示。首先需要引入我们需要的js文件<script src="../angular.js"></script><script src="../angular-ui-router.js"></script><script src="原创 2017-07-30 23:26:25 · 4800 阅读 · 4 评论