最近项目使用angularjs1.5,由于之前没有接触过angularjs,开发时磕磕绊绊,现在把开发时遇到的一些问题记录下来,一遍日后查找
var ctx = function() {
var path = window.location.href;
var pathName = window.location.pathname;
var hostPath = path.substring(0,path.indexOf(pathName))
var projectName = pathName.substring(0,pathName.substring(1).indexOf('/') + 1);
return (hostPath + projectName);
}
2、angularjs url带参数跳转
在路由js中增加参数params
.state("tip-off-detail",{
params:{"id":null},url: "/tip-off-detail",templateUrl: "main/home/tip-off-detail.html"
})
ui-sref="tip-off-detail({id:publicReport.id})"
3、angularjs使用checkBox
注意一定要使用ng-repeat的形式 ng-model中指定的model才能实现双向绑定,不然ng-model中的值不会随checked与unchecked变动
<input type="checkBox" ng-repeat="item in checkBoxs" ng-model="item.checked">{{item.text}}
ng-controller中如下定义:
$scope.checkBoxs = [ {
"checked" : true,"text":"..."
},...];
4、angularjs使用radio
类似于checkBox即可
5、angularjs使用file上传
注意input的type为file时不能使用ng-change事件此时只能使用onchange代码如下:
<input type="file" id="fileInput" onchange="angular.element(this).scope().uploadFile(this)">
可以在uploadFile中写文件上传代码,使用formdata上传时代码如下:
$scope.uploadFile = function(e) {
var formdata = new FormData(); // 初始化一个FormData实例
formdata.append('file',e.files[0]); // file就是图片或者其他你要上传的formdata
$http.post(ctx() + "/common/upload",formdata,{
transformRequest : angular.identity,headers : {
'Content-Type' : undefined
}
}).success(function(data) {
}).error(function() {
});
}
6、ng-click不起作用
ng-click作用于label的子元素上时可能不起作用,把label改为div即可
7、$http参数
$http({
url:,
params:{},
data:,
}).success().error();
8、主动使得ng-click失效
使用ng-click = “use || click()” use为false时 click可用 use为true时 click不可用
9、ioinc在ion-content标签下 ng-model失效的解决方案 这是由于ioinc的 scope与controller中的scope不是同一个scope导致的 可以在controller中使用 model={}先定义,在绑定的地方使用 model.attr的方式引用 或者 在绑定时使用$parent.attr