ng-include directive is used to embed an HTML page into another HTML page. This technique is extremely useful when you want to reuse a specific view in multiple pages in your application. The value of ng-include directive can be the name of the HTML…
For building an HTML template with reusable widgets like header, sidebar, footer, etc. Basically the main content is the central DIV which will have its content varying between routes, header and footer will be almost always the same, sidebar can var…
Google can execute AJAX & JavaScript for indexing, you can read the below link for more detailed information:Ajax crawling full specification: https://developers.google.com/webmasters/ajax-crawling/docs/specification From the above link you will know…
By default, AngularJS will route URLs with a hashtag. For example: http://example.com/ http://example.com/#/users http://example.com/#/roles It is very easy to get clean URLs and remove the hashtag from the URL. There are 2 things that need to be don…
app/----- components/---------- users/--------------- controllers/-------------------- users.controller.js--------------- views/-------------------- user-list.tpl.html--------------- app.users.js--------------- app.users.routes.js---------- roles/---…
angularjs 默认给 input[checkbox] 元素定制了一些属性,如: <input type="checkbox" ng-mudel="name" ng-true-value="yes" ng-false-value="no" ng-change="fn()"> ng-mudel 属性是Angularjs里面最常见的属性了,是用来数据双向绑定的属性. ng-true-value…
所谓的延迟加载通常是:直到用户交互时才加载.如何实现延迟加载呢? 需要搞清楚三个方面: 1.html元素的哪个属性需要延迟加载?2.需要对数据源的哪个字段进行延迟加载?3.通过什么事件来触发延迟加载? 自定义的Directive的页面表现大致是这样: <ul> <li ng-repeat="cust in customers" delay-bind="{{::cust.street}}" attribute="title" tr…
'use strict'; angular.module('app.core').directive('ueditor', [function () { return { restrict: 'A', require: 'ngModel', link: function (scope, element, attrs, ctrl) { var _initContent = ''; var editor; var editorReady = false; ctrl.$render = functio…
A factory which creates a resource object that lets you interact with RESTful server-side data sources. The returned resource object has action methods which provide high-level behaviors without the need to interact with the low level $http service.…
ui-router is a 3rd-party module and is very powerful. It supports everything the normal ngRoute can do as well as many extra functions. Here are some common reason ui-router is chosen over ngRoute: ui-router allows for nested views and multiple named…
/Content----- images/ // Images for your app----- css/ // Styles for your app/Scripts----- libs/ // Third-party libraries such as jQuery, Moment, Underscore, etc.----- app/---------- common/ // Acts as reusable components for your app---------------…
app/----- common/ // Acts as reusable components for your app---------- header/--------------- controllers/-------------------- header.controller.js--------------- views/-------------------- header.tpl.html---------- sidebar/--------------- controlle…
项目中把controller.service抽取出来 一步一步没有报错 index那里加 <script src="js/controllers/XXController.js"></script>就报错了 [原因] 我抽取出来的controller头部也这样写了 angular.module('gflt.controllers', []) 正确写法 angular.module('gflt.controllers')…
https://docs.angularjs.org/guide/directive https://docs.angularjs.org/api/ng/service/$compile https://docs.angularjs.org/guide/compiler https://docs.angularjs.org/api/ng/service/$interpolate https://docs.angularjs.org/api/ng/provider/$compileProvider…
http://stackoverflow.com/questions/14876112/difference-between-the-observe-and-watch-methods https://docs.angularjs.org/api/ng/type/$compile.directive.Attributes $observe()是Attributes 对象的一个方法,它只能用于observe/watch一个DOM attribute的value change.它只在directiv…
什么是隔离 Scope AngularJS 的 directive 默认能共享父 scope 中定义的属性,例如在模版中直接使用父 scope 中的对象和属性.通常使用这种直接共享的方式可以实现一些简单的 directive 功能.当你需要创建一个可重复使用的 directive,只是偶尔需要访问或者修改父 scope 的数据,就需要使用隔离 scope.当使用隔离 scope 的时候,directive 会创建一个没有依赖父 scope 的 scope,并提供一些访问父 scope 的方式.…
ng-repeat是AngularJS中一个非常重要和有意思的directive,常见的用法之一是将某种自定义directive和ng-repeat一起使用,循环地来渲染开发者所需要的组件.比如现在有一个form-text指令,用于快速构建起带自定义数据验证的表单文本框,我们可以用类似下面的代码方便地建立起一个简单的表单: controller中: $scope.form = {}; $scope.form.inputs = [{ model: 'name', required: 'requir…
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directives匹配HTML并执行.这允许directive注册行为或者转换DOM结构. Angular自带一组内置的directive,对于建立Web App有很大帮助.继续扩展的话,可以在HTML定义领域特定语言(domain specific language ,DSL). 一.在HTML中引用direc…
之前写过一篇了 http://www.cnblogs.com/keatkeat/p/3903673.html 但某些部分写的不太清楚,甚至有点错误,所以今天特地在这里再来谈谈. 这篇主要是说指令的隔离还有和controller的沟通. 指令的运行过程基本上我们可以简单的理解为 : template -> compile -> controller -> pre-link -> post-link 我们通常只是用到post link,但如果你的指令有嵌套,子层需要父层的一些值的话,可…
参考: https://docs.angularjs.org/api/ng/service/$compile http://www.zouyesheng.com/angular.html Directive (指令),是Angular最为强大和复杂的部分.directive可以扩展丰富html的行为. 举个例子,如果我们想让html某元素在屏幕上居中显示,我们无需知道屏幕窗口实际的宽度,只需加上align="center"属性就能达到目的. 这是html提供给我们好的接口行为.但是如果…
转自:http://segmentfault.com/q/1010000002400734 官方API:http://docs.angularjs.cn/api/ng/service/$compile 一个民间详细介绍:http://blog.51yip.com/jsjquery/1607.html 问: angular.module('docsTransclusionExample', []) .controller('Controller', ['$scope', function($sco…
var cmsPlus = angular.module('cmsPlus', []); cmsPlus.directive('ckEditor', function() { return { require: '?ngModel', link: function(scope, elm, attr, ngModel) { var ck = CKEDITOR.replace(elm[0]); if (!ngModel) return; ck.on('instanceReady', function…
AngularJS之directive AngularJS是什么就不多舌了,这里简单介绍下directive.内容基本上是读书笔记,所以如果你看过<AngularJS up and running>,那么这个可以忽略. 1.在AngularJS中,directives有两个主要的类型:1⃣️UI展示的修改器,如ng-show.ng-model2⃣️可复用的组件,如菜单.轮播器.taps等. 2.directives定义: angular.module('stockMarketApp', [])…
需求背景:         directive模块化某表单信息,但表单信息可加入多条.此时就涉及到clone directive. 解决方式:         能够通过使用angularjs中$compile来进行clone directive.clone direcitve中常涉及到数据的绑定. 详细方法: tw.factory('DirectiveUtil', [function() { var DirectiveUtil = {}; DirectiveUtil.DirectiveBuild…
AngularJS中,当需要自定义Directive时,通常返回一个对象,就像如下的写法: angular.module('modulename') .directive('myDirective', function(){ return { restrict: 'EA', //E表示element, A表示attribute,C表示class,M表示commnent,即注释 scope:{ title: '@' //@读属性值,=双向绑定,&用户函数 } template: '<div&g…
一.directive中的scope directive无疑是AngularJS中比较复杂难懂的部分,而directive中个scope更是其中最复杂的部分了,尤其是在嵌套directive中互相通讯的时候. 单独的directive中,scope概念还是比较简单的,此时scope的三种取值情况为: scope:false  此时,directive没有独立的scope对象,link函数中引用的scope对象来自于当前节点的默认controller scope:true  此时,directiv…
指令Directive是AngularJS最重要的核心.我用AngularJS用的并不是很深,一直以来也是在使用中摸索,从一开始的什么都不懂,查不到系统的资料,到开始使用一些简单的数据绑定{{}},到发现ng-bind比双括弧好用是因为DOM加载速度的问题,到发现简单的ng-repeat能完成很多事情,到用它来做表单验证时发现ng-form好好用,到... 总之,对AngularJS从无知到有一定认可的现在,我觉得我使用它最大的好处就是数据绑定,将数据绑定在$scope里面然后想怎么写就怎么写.…
基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github.com/dolymood/angular-packages,已增加docs服务,输入地址即可,例如:http://blog.aijc.net/angular-packages/angular-1.3.15/docs/ jquery?ag? : http://stackoverflow.com/qu…
自从上一篇文章到现在已经有将近一个月的时间,我将精力放在了前端页面分解与组装,和angularjs如何与jquery.bootstrap.D3等一系列其他类库结合使用的经验总结上.由于公司新招了一些员工,对于我而言快速的做出demo页面用以示范,是让新人快速上手的最佳方案.即使这段时间工作较忙,写这样大段文字的时间确实不好找,但我依然必须勤做记录,否则灵感如昙花一现转瞬即逝,如何带领新人,推动项目?故而我只能知无不言,把我所关注过的大小重点都记录下来. 那么接下来我先讲讲用angularjs如何…