AngularJS 使用指南-20160815-江丽娜

AngularJS 使用指南

作者：江丽娜

关于modal的controller继承父画面的 $scope。

modal引入用fromTemplate方式时，返回的是object ，所以与使用fromTemplateUrl时返回的promise不同，获取modal的使用应用下列方法。

angular.module('app').controller('BindCardAddCtrl', function ($scope,$ionicModal) { $scope.modal= $ionicModal.fromTemplate('', { 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.msg); }).

error(function (data, status, headers, config) { });

服务器端可以这样设置

String callback = request.getParameter(\); StringBuilder jsonp = new StringBuilder(callback); out.print(jsonp.toString());

在没有服务器的情况下可以建立一个本地txt文件进行模拟访问，格式如下： 注意angular.callbacks._0(）是与上面callback对应的回掉开头

angular.callbacks._0({ \: [{

\: \股票基金\, \: \ }, {

\: \混合基金\, \: \ }] });

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文件之前加载。

在app/style文件夹下加入密码键盘的css文件keyboard.css，并改名成_keyboard.scss

随后在main.scss文件中加入导入次文件的代码。

@import \;

二、使用方法

在需要加入密码键盘的html页面中放入如下代码：

注意：每个input框需要自己各自的密码键盘div

js调用键盘示例代码如下：

注意：此代码不能写在controller里面，必须单独写个js文件，放在app/libraries文件夹下，随后在index.html中手动加入引入js文件的代码 记住要放在angularJS的js文件之前加载。 var completeKeyboard = null; var numberKeyboard1=null;

function initCompleteKeyboard(id){

completeKeyboard = new CFCAKeyboard(\, KEYBOARD_TYPE_COMPLETE); //设置回调

completeKeyboard.setDoneCallback(doneCallback); //绑定控件ID

completeKeyboard.bindInputBox(id); //隐藏密码键盘

completeKeyboard.hideKeyboard(); //设置随机数

if(CFCA_OK != completeKeyboard.setServerRandom(\)) alert(\); //清除残留文字

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, \,function(event) { sipBox.blur();

completeKeyboard.bindInputBox(id);

if(numberKeyboard){

if(numberKeyboard.isShowing()) { numberKeyboard.hideKeyboard(); }}

completeKeyboard.showKeyboard(); }); }

在controller里面这样写,传入的参数就是页面上，需要挂上密码键盘的input标签的id；

initCompleteKeyboard(\);

注意：有多个input需要多个密码键盘div和多个实例化js代码。

三、打包方法

在coral工具目录下（不是coral工程目录），app\\tasks文件夹下，打开build.js文件找到如下代码

去除ut，之后如下

随后在项目目录下执行coral build 会生在app下生成dist文件夹

注意生成完的文件夹下一开始没有libraries文件夹，需要手工从app下拷贝到app/dist目录下

四、调试

因为CFCA代码中使用this指向当前对象，但coral的live reload会和此有冲突，所以在coral serve启动后预览页面时会在控制台报错，但从生成的.tmp目录下直接打开运行不会报错。所以angularJS和CFCA没有冲突。

进行调试时，可以直接打开.tmp目录下的页面进行调试，查看键盘弹出效果。

AngularJS POST传参问题解决办法

AngularJS，传输数据使用Content-Type: application/json和{ \\\\这样的json序列。使得Spring后台服务取不到值。 在angularJS的config里这样设置，使得传参方式变成x-www-form-urlencodedand之后，还需要转换序列的格式

$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

Override $http service's default transformRequest

$httpProvider.defaults.transformRequest = [function(data) { /** * The workhorse; converts an object to x-www-form-urlencoded serialization. * @param {Object} obj * @return {String} */ var param = function(obj) {

var query = '';

var name, value, fullSubName, subName, subValue, innerObj, i;

for (name in obj) { value = obj[name];

if (value instanceof Array) {

for (i = 0; i < value.length; ++i) { subValue = value[i];

fullSubName = name + '[' + i + ']';

本文来源：https://www.bwwdw.com/article/7s9v.html