angularjs常用代码块

js代码难以调试，纠错，因此记录这些代码块，便于调错

 

功能	代码
自定义指令属性 的方法 传递	这么变态的需求有没有？在自定义的指令的属性中定义外部方法，然后在指令中获取到 句柄。如下：   <ul storetree id="treeDemo" class="ztree" showIcon="showIconForTree" onClickTest="clickTest()"></ul> 对，这里有个 clickTest()方法，需把这个方法传递进去 XX.directive('',function(){ onClick: function(event,treeId,treeNode,clickFlag){ eval(attrs.onclicktest'); //自动变小写 }, })    是的，用eval方法就可以了
页面路由	var app = angular.module('MyApp', ['ngResource','ngRoute','ngGrid']).config(function ($routeProvider) { $routeProvider .when('/store', { templateUrl: 'page/store.html', controller: '' }) .when('/schema', { templateUrl: 'page/schema.html', controller: '' }) .when('/storeinfo', { templateUrl: 'page/storeinfo.html', controller: '' }) });
加入模块	var app = angular.module('MyApp', ['ngResource','ngRoute','ngGrid'])   引入新的功能千万别忘记加入模块
controller间交互	通过广播，子->父->子，controller间层级通过html的层级来定，也可在js中指定app.controller("a1").controller("a2") 1 发送者    $scope.$emit("Achange", params);   2 父接受者   $scope.$on("Achange", function (event,params) { $scope.$broadcast("AChangeFromParent",params); });   3 接受者     $scope.$on("AChangeFromParent", function (event, params) { ...dosth }
apply方法	为何要用applay？强制进行数据绑定或触发动作，有时方法并不执行，比如$http请求并不会被触发，此时需调用apply方法，从开发中来看$http请求最容易发生该情况，而且$http是异步回调，次序一定要当心。apply方法参考http://www.cnblogs.com/penghongwei/p/3398361.html
http请求	$http({ url:URL, method:"GET" }).success(function(data){ $scope.spaceSchemaList = data; });
ng-grid	ng-grid中加入其它控件，比如select的方法是在cellTemplate或editableCellTemplate中加入html元素，其中貌似cellTemplate是编辑前，editableCellTemplate是编辑后 $scope.selectCell ="<select ng-model='COL_FIELD' ng-class='\'colt\' + col.index' ng-input='COL_FIELD' ng-options='id as name for (id, name) in statuses' ng-blur='updateEntity(row)'></select>"; $scope.buttonCell = '<button class="btn btn-link" ng-click="deleteDFV(row)" ng-show="secondShow">删除</button>'; $scope.gridOptions = { data: 'store.defaultValues', enableCellEdit: true, columnDefs: [{field: "name",displayName:"名称"}, {field:"dType",displayName:"类型", editableCellTemplate: $scope.selectCell ,cellFilter: 'mapStatus'}, {field:"defaultValue",displayName:"默认值"}, {field:"evalExp",displayName:"表达式"}, {displayName:"操作",cellTemplate:$scope.buttonCell, enableCellEdit: false} ] }; 比如，在selectCell中定义了ng-options ng-blur等指令，在columnDefs中定义了Filter，而后是指令及服务的定义 app.filter('mapStatus', function( StatusesConstant ) { return function(input) { if (StatusesConstant[input]) { return StatusesConstant[input]; } else { return 'unknown'; } }; }) app.factory( 'StatusesConstant', function() { return { 1: 'preset', 2: 'evaljs' }; });
table新增列	加入辅助行，首先隐藏，后点击显示即可。辅助行中关联的为已angularjs辅助对象，当新增成功保存时才会添加到正式数据中去，注意，辅助对象的添加必须采用深拷贝，否则辅助对象都会关联到同一引用上，无论新增多少次，都与最后一次相同。
select	select的常用用法     <select class="selectdatatype" ng-model="property.complexTypeName" ng-options = "o.id as o.id for o in spaceSchemaList"> <option >--请选择--</option> </select>   如代码所示ng-model为绑定的对象，ng-options形式为 o.value as o.name for o in List， 其中value为真实传递的值，name为html上显示的值
服务	即单例对象，用于将操作、数据等集中管理，避免分散。·如 app.factory( 'StatusesConstant', function() { return { 1: 'preset', 2: 'evaljs' }; });   如上所示返回了一个对象
resource服务	storeInstance.get({setName:treeNode.name}).$promise.then( function(resolve){ $scope.store = resolve; $scope.set.setName = $scope.store.entitySetName; }, function(reject){console.log("get store failed")} ) 如代码所示，使用了$promise代理对象,代理对象有n多好处，具体请自行参考 服务定义为： app.factory('storeInstance',['$http','$resource',function($http,$resource){ return $resource('/MDE/DSE/EntitySet(\':setName\')', {setName:'@setName'}, {create:{method:'PUT'},params:{},isArray:false} ) ; }]);   其中第二个参数{setName:'@setName'}为入参，  第三个参数{create:{method:'PUT'},params:{},isArray:false}为给该服务新定义了一个方法，方法名为create，该方法为一个put请求，params:{}表示没有多余参数，因此输入参数与{setName:'@setName'}相同，实例如下 storeInstance.create({setName:treeNode.name})
新增和修改	新增和修改一般都是点击同一个按钮，因此常用方法是使用标志位，但由于为one-page-application,controller不会被销毁，因此使用标志位时可能会导致逻辑混乱

 

评论

3 楼 white_crucifix 2014-08-25  

哈，代码放进

咯

2 楼 vvsuperman 2014-08-25  

擦，哪里粗糙了，指正下

1 楼 white_crucifix 2014-08-22  

太粗糙