欢迎大家指导与讨论 : ）
一 、前言
由于笔者水平有限，在这里只是分享自己开发组件的一些思路~ 摘要：无UI组件类、有UI组件类、有UI组件类型2。欢迎拍砖吐槽 O(∩_∩)O
二 、无UI组件类
顾名思义，这类组件没有任何表现形式出现在用户界面上，只是一般功能的实现者，也就是平时所用到、所需要开发的 Factory。它一般由 controller 进行调用，用于处理并返回数据。重点是，Fatory 某些方法最好使用 $q(promise)，来分隔业务逻辑。
Controller
↓ ↑
data ↓ ↑ promise
↓ ↑
Factory
app.factory('hi', ['$q', '$timeout', function($q, $timeout){
function show(data) {
var deferred = $q.defer();
$timeout(function(){
// ... 处理数据data
defer.resolve(result)
}, 16)
return deferred.promise;
}
return {
show: function(data) {
return show(data)
}
}
}])
app.controller('Ctrl', ['hi', function(){
$scope.test = function() {
hi.show(data)
.then(function(result){
// ...
})
}
}])
三 、有UI组件类
该类组件的UI主要由 Factory 生成界面并插入到body中，类似于 Ionic的ActionSheet上拉菜单或者是弹窗。该类组件的需要注意的问题主要有：如何利用Angular的特性显示动态的数据、模板，如何更好地增强组件的复用性。因此，笔者的主要思路是：1 . 模板是稳定的而且单例的(生成的模板保存在 Factory 某属性中)。2 . 我们只需要用数据改变模板的内容( $compile，$rootScope.$new() )。3 . 复用性主要体现在每次调用 Factory 它的初始状态必须是唯一的( scope.$destroy/$rootScope.$new()或者其他一些reset操作 )。当然，使用 $q( promise )来执行回调依然是很好的选择。
Controller
↓ ↑
option ↓ ↑ promise
↓ ↑
Factory
// 在Factory变量保存单例模板:
var a = angular.element(_html())
// 每当生成模板函数时
return a ? a : angular.element( _html())
// 每次调用启动函数
function show(option){
var scope = $rootScope.$new(); // 新增作用域用于管理视图中的数据
scope.title = option.title; // 配置内容
scope.showornot = option.show // 配置动态显示
$compile(_html())(scope) // 绑定模板和作用域
}
// 每次关闭时
function close(data){
deferred.resolve(data);
scope.$destory(); // 销毁作用域
}
// 模板函数
function _html( ){
return [
"<div>",
"<h3>{{ title }}</h3>", // 根据配置参数，动态显示不同内容
"<div ng-if='showornot'></div>" // 根据配置，动态显示
"</div>"
].join('')
}
四 、有UI组件类2
该类组件与上述的主要区别是UI模板是由指令的template参数所负责，功能实现者是自己开发的 Factory 工具，而 Controller 则是作用域的提供者，用于根据数据进行下一步的业务编写。于是此组件便拆分成3大部分。
directive
↓ ↑ ↓↑
调用 ↓ ↑ promise ↓↑
↓ ↑ (data) ↓↑ 指令scope的绑定策略
Factory ↓↑
↓↑
Controller -> 下一步处理