angularjs 简单笔记

最近项目使用angularjs1.5,由于之前没有接触过angularjs，开发时磕磕绊绊，现在把开发时遇到的一些问题记录下来，一遍日后查找

1、获取当前web的根路径，js代码

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