Fork me on GitHub

有关angularJS问题总结

发表于 | 分类于 |

前言

由于工作中在用到angular1.x时开发项目，工作中难免会遇到各种各样的问题，所以自己积累下来，希望能帮助其他人。

1、angularJS前台传list数组，后台springMVC接收数组

资料来源：http://www.cnblogs.com/nelson-hu/p/6512962.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

        $scope.userScopeList = [
              {
    "ID": "string",
    "RoleID": "string",
    "MenuID": "string",
    "BtnID": "string",
    "CreateUserID": "string",
    "CreateDate": "2017-05-23T07:26:18.403Z",
    "UpdateUserID": "string",
    "UpdateDate": "2017-05-23T07:26:18.403Z"
  },
{
    "ID": "string",
    "RoleID": "string",
    "MenuID": "string",
    "BtnID": "string",
    "CreateUserID": "string",
    "CreateDate": "2017-05-23T07:26:18.403Z",
    "UpdateUserID": "string",
    "UpdateDate": "2017-05-23T07:26:18.403Z"
  }
        ];
        var fd = new FormData();//// 使用angularJS的FormData封装要传送的数据
        var newJson = angular.toJson($scope.userScopeList);////把对象(集合)转换为json串
        console.log(newJson);
        fd.append('newJson', newJson);////参数放入formData中
        ////使用post方法 传送formdata对象
        $http.post('http://192.168.0.202/api/authority/Authority/AddAuthorityList', fd, {
            transformRequest: angular.identity, //使用angular传参认证
            headers: {
                headers : { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },////设置请求头
            }
        }).then(function(res){
            console.log(res);
        })

2、 $scope.$watch()只能监视$scope上的视图模型成员，也可以监视方法的返回值

watch函数其实是有三个变量的，第一个参数是需要监视的对象，第二个参数是在监视对象发生变化时需要调用的函数，实际上watch还有第三个参数，它在默认情况下是false。
当第三个参数是false时，其实watch函数监视的是数组的地址，而数组的内容的变化不会影响数组地址的变化，所以watch函数失灵了。 如果监视数组的内容改变的话，第三个参数传true即可。

1
2
3
4
5
6
例如：
$scope.items=[  
{a:1},  
{a:2}  
{a:3}];  
$scope.$watch('items',function(){...},true);

$watch 监听多个变量

1
2
3
4
5
6
//当count或page变化时，都会执行这个匿名函数  
$scope.count=1;  
$scope.page=1;  
$scope.$watch('count + page',function(){  
   //
});

$watch 函数的返回结果
方法1：监视对象为“函数名()”的字符串，记得加“()”!

1
2
3
4
5
6
7
8
9
10
11
12
//未完成的任务个数  
$scope.unDoneCount = function() {  
    var count = 0;  
    angular.forEach($scope.todoList, function(todo) {  
        count += todo.done ? 0 : 1;  
    });  
    return count;  
};  
//单选影响全选部分  
$scope.$watch('unDoneCount()', function(nv) {  
    $scope.isDoneAll = nv ? false : true;  
});

方法2：在监视对象中设置为匿名函数，返回要监视的函数的返回值

1
2
3
4
5
$scope.$watch(function(){  
    return $scope.unDoneCount();//不要忘了(),要执行的啊~  
}, function(nv) {  
    $scope.isDoneAll = nv ? false : true;  
});

3、 JQuery框架一定要在angularJS之前加载

资料来源：http://blog.csdn.net/aitangyong/article/details/48131575

（1）如果我们的web页面只引入angulrjs框架(不引入jQuery框架)，那么我们使用过程中可能会遇到如下错误：

1
Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite!

这是因为angular.element()这个API并不能支持类似jquery的选择器，也就是说angular.element()并不支持selector.最好引入JQuery框架，因为JQuery框架选择元素实在是太方便可。如果我们确实不想使用JQUery，那么可以使用HTML5中的document.querySelector(),这个API是支持选择器的
（2）如果页面中使用了jQuery和angular，那么一定要先加载jQuery框架，然后再加载angular
下面的代码我们先加载angular后加载jquery，当点击injector的按钮的时候，会报错:

1
TypeError: $(...).injector is not a function

如果我们先加载jQuery后加载angular，那么就不会有问题。这是因为如果angular加载的时候没有找到jQuery框架，那么会使用它自带的jqlite，这样angular就不能将injector()、scope()等方法注入到jQuery对象中。

angularJS知识进一步学习笔记

$sce

为什么要要$sce？因为AngularJS里好些地方，比如路径默认是个字符串，不会认为是路径，从而访问不到我们需要的东西，那么我们就可以通过$sce告诉angualrJS这个路径，这样是很安全滴

1
2
3
4
5
$sce.trustAs(type,name);
$sce.trustAsUrl(value);
$sce.trustAsHtml(value);//将字符串编译成可加载的HTML
$sce.trustAsResourceUrl(value);
$sce.trustAsJs(value);

$parse

作用：将一个angularJS表达式转换成一个函数

1
2
3
4
5
6
7
8
9
10
11
$parse(expression)

expression:需要被编译的angularJS语句
返回值：func(context, locals)
        context[object]:针对你要解析的语句，这个对象中含有你要解析的语句中的表达式(通常是一个scope object)
        locals[object]: 关于context中变量的本地变量，对于覆盖context中的变量值很有用。
        返回的函数还有下面三个特性：

        literal[boolean]:表达式的顶节点是否是一个javascript字面量
        constant[boolean]:表达式是否全部是由javascript的常量字面量组成
        assign[func(context, local)]:可以用来在给定的上下文中修改表达式的值

案例：

1
2
3
4
5
<div ng-app="MyApp">
    <div ng-controller="MyController">
        <h1>{{ParsedValue}}</h1>
    </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
angular.module("MyApp",[])
.controller("MyController", function($scope, $parse){
    var context = {
        name: "dreamapple"
    };
    // 因为这个解析的语句中含有我们想要解析的表达式，
    // 所以要把不相关的用引号引起来，整体然后用+连接
    var expression = "'Hello ' + name";
    var parseFunc = $parse(expression);
    $scope.ParsedValue = parseFunc(context);
});

$new(true)

1
2
$rootScope.$new(true);新创建的子范围
$scope.$new(true);

$compile

讲HTML字符串或DOM编译为模板并生成模板函数，然后将其scope与模板链接在一起

1
$compile('<li class="text-danger" ng-repeat="(name, wrong) in errors()" ng-if="wrong">{{name|error}}</li>')($scope);

ngModelController

是自定义指令中的link属性或者controller的第四个参数名
可以使用它在自定义指令中利用ngMode的controller来做双向数据绑定，沟通控制器和视图层的数据交换。

-------------本文结束感谢您的阅读-------------