AngularJS 使用指南-20160815-江丽娜
时间：2025-04-05
AngularJS 使用指南
作者：江丽娜关于modal的controller继承父画面的$scope。
modal引入用fromTemplate方式时，返回的是object ，所以与使用fromTemplateUrl 时返回的promise不同，获取modal的使用应用下列方法。
angular.module('app').controller('BindCardAddCtrl', function ($scope,$ionicModal) { $scope.modal= $ionicModal.fromTemplate('<bank-list></bank-list>', { animation: 'slide-in-up'
});
$scope.openModal = function () {
$scope.modal.show();
};
});
在coral中modal被抽象成components组件时，其挂载指令directive继承父controller的$scope设置为true。
angular.module('app').directive('bankList', function () {
return {
restrict: 'E',
scope: true,
templateUrl: 'components/bank/list.html',
controller: 'BankListComponentCtrl',
};
});
然后，在组件的controller中就能使用父画面的$scope了。
angular.module('app').controller('BankListComponentCtrl', function ($scope) {
$scope.closeModal = function () {
$scope.modal.hide();
};
});
$http中JsonP的使用，以及后台的对接方法和本地调试
在js中可以这样调用jsonP，callback是jsonP的回调接口，必须给出
$http.jsonp('https://127.1.1.0/gateway-local/fundTrading?callback=JSON_CALLBACK', { params: {
contractNo: contractNoTxt,
fundCode: fundCodeTxt,
}
}).success(function (data, status, headers, config) {
console.log("data_success:" + data.msg);
}).
error(function (data, status, headers, config) {
});
服务器端可以这样设置
String callback = request.getParameter("callback");
StringBuilder jsonp = new StringBuilder(callback);
out.print(jsonp.toString());
在没有服务器的情况下可以建立一个本地txt文件进行模拟访问，格式如下：
注意angular.callbacks._0(）是与上面callback对应的回掉开头
angular.callbacks._0({
"fund": [{
"fundName": "股票基金",
"fundCode": "001"
}, {
"fundName": "混合基金",
"fundCode": "002"
}]
});
Js调用端可以这样写
$http.jsonp('/demo/fundlist.txt?callback=JSON_CALLBACK').
success(function(data, status, headers, config) {
}).
error(function(data, status, headers, config) {
});
Coral中使用CFCA密码键盘指南
一、准备工作、引入文件
在coral的项目工程目录下app/libraries文件夹下放入cfcasip.min.js（密码键盘的js文件），随后在app文件夹下的index.html中手动加入引入js文件的代码。记住要放在angularJS的js文件之前加载。
<script src="libraries/cfcasip.min.js" charset="utf-8"></script>
在app/style文件夹下加入密码键盘的css文件keyboard.css，并改名成_keyboard.scss
随后在main.scss文件中加入导入次文件的代码。
@import "keyboard";
二、使用方法
在需要加入密码键盘的html页面中放入如下代码：
<DIV id="CompleteKeyboard" style="display:none"></DIV>
<DIV id="NumberKeyboard" style="display:none"></DIV>
注意：每个input框需要自己各自的密码键盘div
js调用键盘示例代码如下：
注意：此代码不能写在controller里面，必须单独写个js文件，放在app/libraries 文件夹下，随后在index.html中手动加入引入js文件的代码
记住要放在angularJS的js文件之前加载。
var completeKeyboard = null;
var numberKeyboard1=null;
function initCompleteKeyboard(id){
completeKeyboard = new CFCAKeyboard("CompleteKeyboard", KEYBOARD_TYPE_COMPLETE); //设置回调
completeKeyboard.setDoneCallback(doneCallback);
//绑定控件ID
completeKeyboard.bindInputBox(id);
//隐藏密码键盘
completeKeyboard.hideKeyboard();
//设置随机数
if(CFCA_OK != completeKeyboard.setServerRandom("MTIzNDU2Nzg5MDk4NzY1NA=="))
alert("setServerRandom error");
//清除残留文字
completeKeyboard.clearInputValue(id);
//调用键盘显示初始化方法
initSipBoxComplete(id,completeKeyboard);
}
function setUpEvent(elem, eventType, handler) {
console.log(handler);
var a = (elem.attachEvent ? elem.attachEvent( eventType, handler)
: ((elem.addEventListener) ? elem.addEventListener(eventType, handler, false) : null));
return a;
}
function initSipBoxComplete(id,completeKeyboard) {
var sipBox = document.getElementById(id);
setUpEvent(sipBox, "click",function(event) {
sipBox.blur();
completeKeyboard.bindInputBox(id);
if(numberKeyboard){
if(numberKeyboard.isShowing()) {
numberKeyboard.hideKeyboard();
}}
completeKeyboard.showKeyboard();
});
}
在controller里面这样写,传入的参数就是页面上，需要挂上密码键盘的input标签的id；
initCompleteKeyboard("IDcode");
注意：有多个input需要多个密码键盘div和多个实例化js代码。
三、打包方法
在coral工具目录下（不是coral工程目录），app\tasks文件夹下，打开build.js 文件找到如下代码
去除ut，之后如下
随后在项目目录下执行coral build
会生在app下生成dist文件夹
注意生成完的文件夹下一开始没有libraries文件夹，需要手工从app下拷贝到app/dist目录下
四、调试
AngularJS 使用指南-20160815-江丽娜.doc
将本文的Word文档下载到电脑
