一、需求
在项目开发过程中，需要对药店信息进行更改。如下图所示。现在的需求是：当药店信息没有发生变化时，点击“更新信息”按钮，提示“药店信息未做任何更改”。
二、实现
可以利用 angualr 的脏值检查机制解决。
由于对 angular 的脏值检测机制不是很了解，貌似也不太好学习。就考虑使用别的方法，也可以使用 ng-change 内置指令,通过控制业务逻辑实现。Demo 如下:
View 视图:
<input ng-model="addr_y" id="addr_y" type="text" ng-change="textChange(addr_y)" />
复制代码
Controller 控制器:
$scope.doUpdate = function(){var change = instance.change; if(!$scope.shopname){alert("药店名称不能为空,请输入...");return;}................................if(!$scope.addr_y){alert("银行纬度不能为空,请输入...");return;}$scope.textChange = function(val){// alert('变化了'); instance.change = true; }//alert(change);if(!change){alert("药店信息未做任何更改");}else{appCallServer($http,"G016",{"mangid":localStorage.mangid,"shopid":"S"+$scope.phone, ..............."addr_x":$scope.addr_x,"addr_y":$scope.addr_y},function(data){//success functionalert("保存药店信息成功");instance.change = false;//window.location="index.html";});}};
复制代码
三、效果
当信息未做修改时
当信息修改时
四、附:angular 架构图
五、在 AngularJS 应用中集成科大讯飞语音输入功能
根据项目需求，需要在首页搜索框中添加语音输入功能，考虑到科大讯飞语音业务的强大能力，遂决定使用科大讯飞语音输入第三方服务。软件首页截图如下所示：
涉及的源代码如下所示:
<button ng-click="startRecognize()"><i class="icon ion-mic-a " ></i></button> //语音识别$rootScope.startRecognize = function() {var speech;var options = {}; //语音识别参数，用于控制语音引擎的各种技术参数options.engine = 'iFly';options.userInterface = 'false';text = "";plus.speech.startRecognize(options, function(s) {text += s;console.log(text);text = text.replace(',', '').replace('。', '').replace('?', '');$scope.$apply(function() {$rootScope.medname= text;$scope.searchMed(2, $rootScope.medname)});}, function(e) {$ionicLoading.show({template: "语音输入失败,请重新尝试"});setTimeout(function() {$ionicLoading.hide();}, 2000);});setTimeout(function() {plus.speech.stopRecognize();}, 10000); //超时语音结束}
复制代码
其中涉及到使用 ionic 框架中的按钮组件。
其云端打包授权功能需要到第三方开发平台申请应用后获取相关配置参数。集成过程与微信授权认证差不多。
首先是需要添加第三方登录模块，双击应用的 manifest.json 文件：
切换到“模块权限配置”项，在“未选模块”中选择“Speech(语音输入)”添加到“已选模块”：
代码视图配置
切换到“代码视图”项，在 permissions 节点下添加如下 Speech 节点数据：
"Speech": {"description": "语音输入"}
效果如下所示：
(说明：点击“语音输入按钮”后，弹出录音识别界面，在说出“感冒”一词后将识别出的文字填充在输入栏中，同时搜索相关药品，搜索结果如上图右所示。)
优化
优化点主要存在两个地方:
1.icon 图标过于丑陋
2.将语音输入 icon 集成进 input 输入栏，如下图所示(UC Browser):
3.存在版本兼容问题。有些手机不支持此插件。
首先第一个问题属于美工干的活。但自己似乎应该给其预留出应有的填补空间才对。优化后的效果如下图所示（感觉还是很丑）:
第二个问题，解决起来似乎有一定的难度。自己只能够慢慢摸索。
第三个问题暂时得不到解决。
附：button 设置图片
<button style="width:40px; height:38px; white-space: normal; padding:12px; padding-left:20px; background:none; background: url(img/btnbg.png) no-repeat -2px -2px;" ng-click="startRecognize()"><!--<i class="icon ion-mic-a " ></i>--></button>
复制代码
评论