在使用angularjs时遇到的几个问题

1、$http.post发的数据，后台取不到

      我用的是springMVC框架，前端提交数据使用了$http.post(url, data)方法，不知道为什么总是取不到data数据。如果直接用$.post(url, data); 就可以!

           $http.post('spring/mvc', {
                user: userForm,
                test: 'test'
            }).success(function(){
                alert("保存成功");
            });

     后台的一个controller：

           @RequestMapping(value = "/mvc", method = RequestMethod.POST)
        @ResponseBody
           public void setMenu(User user, String test) {
              System.out.println("user= " + user.toString());
              System.out.println("test = " + test);            }

      打印出来，始终是null.如果直接用$.post就可以正常打印出： test

          $.post('spring/mvc', {
            user: userForm,
            test: 'test'
        });

      针对以上问题的最终解决方案是：

          var url = 'spring/mvc',
            data = {
             #  user: JSON.stringify(userForm),
                user: angular.toJson(userForm),   #此处使用angular.toJson方法的原因在下面说明
               test: 'test test'
           },
           transFn = function(data) {   
              return $.param(data);  
            },
           postCfg = {  
              headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
             transformRequest: transFn
           }; 
         $http.post(url, data, postCfg)
           .success(function(){
            alert("成功");
           });

2、scope中的数据明明改变了但是为什么页面却没有更新？

       这种问题可能是由于没有进入AngularJS自己的Context中去而引起无法对视图进行更新导致的，这个时候你可能要手动进行更新

       你可以尝试使用$apply或者$digest,但也不要过度滥用$digest，毕竟每次调用都是要消耗很多的资源的，但有时候调用了会遇到如下的报错：

        遇到这种问题一般是由于在手动调用$digest的时候使用不当造成的，使用如下的封装就可以了

       
  
  

   
   

    
           var 
    
    updateUI = 
    
    function
    
    (){
   
   
   
   

    
          
    
    if
    
    (!$scope.$$phase){
   
   
   
   

    
            
    
    $scope.$digest();
   
   
   
   

    
          
    
    }
   
   
   
   

    
            };
   
   
   
   

    
          var 
    
    updateRootUI = 
    
    function
    
    (){
   
   
   
   

    
        
    
     if
    
    (!$rootScope.$$phase){
   
   
   
   

    
            
    
    $rootScope.$digest();
   
   
   
   

    
          
    
    }
   
   
   
   

    
            };
   
   
  
  

3、提交的数据多了会出现很多$$hashKey怎么办

         比如下面的数据

           这个是因为$$hashKey是AngularJS为了做DirtyCheck加的haskKey，解决这个办法也很简单，在做序列化处理的时候使用angular.toJson函数

           代替JSON.stringify来序列化数据即可，这也是一个问题中为什么将JSON.stringify注掉使用angular.toJson的原因。

     解决该问题除了使用angular.toJson函数来序列化以外还可以自己在 ng-repeat 的时候写上 track by也可以避免出现$$hashKey。

          比如 track by $index    或  

     <div ng-controller="Test">
       <button ng-click="request()">请求新数据</button>
          // 使用 track by 标识
       <div ng-repeat="user in users track by user.id">
          {{user.name}}
       </div>
    </div>

     以上两种方式均可避免出现 $$hashKey，具体为什么会出现这种问题呢？

    在查看 ng-repeat 的源码时可以发现，当 ng-repeat 的数组被替换时, 它默认并不会重新利用已有的 Dom 元素，而是直接将其全部删除并重新生成新的数组 Dom 元素：

     // 将上次生成的所有 dom 移除
     for (key in lastBlockMap) {
       if (lastBlockMap.hasOwnProperty(key)) {
         block = lastBlockMap[key];
         elementsToRemove = getBlockElements(block.clone);
         $animate.leave(elementsToRemove);
         forEach(elementsToRemove, function(element) { element[NG_REMOVED] = true; });
         block.scope.$destroy();
       }
     }

    Dom 的频繁操作是非常不友好的，为什么 ng-repeat 不能利用已有的 dom 元素去更新数据呢？因为你没有把数组元素的标识属性告诉它，

    那么两次替换的时候它就没办法追 踪了，我们可以看到 ng-repeat 往数组里每个元素加了一个 $$hashKey 的属性：

      

      这个 key 是由 Angular 内部的 nextUid() 方法生成的，类似数据库自增，但是使用的是字符串。

     现在我们明白了，因为每次替换数组都会导致 ng-repeat 为每个元素生成一个新 key, 所以根本没办法重用已有的 Dom 元素，那么我们可以使用下边的语法来避免这个问题：

   <div ng-controller="Test">
    <button ng-click="request()">请求新数据</button>
     // 使用 track by 标识
     <div ng-repeat="user in users track by user.id">
        {{user.name}}
     </div>
   </div>

这样 ng-repeat 就会将其缓存起来啦，当然可能你的数组元素没有一个标识属性，如果元素数量不多那么可以接受，不然还是建议你手动为其生成一个标识属性。

4、页面加载为什么会有那么多404？

     这个一般是由于模板里面直接使用了src，请使用ng-src替代src，这里提一下，sodaRender里请使用soda-src

        <img ng-src="{{user.name}}" />

5、多层循环嵌套时$index重复的问题

         这个跟第三条中提到的是一样的，使用track by 语法(sodaRender也支持)就可以了

          <li ng-repeat="user in users track by $subindex"></li>

6、自己封装的Directive，如何像ng-model一样好用

      这里可以使用directive中的require配置项，将ng-model Directive引进来，并在合适的时间调用setViewValue方法，如下：

7、ng-model想使用个性化问题

       有些时候，ng-model并不能满足所有的场景需求，这个时候可以考虑使用set、get方法做一层拦截，这样就可以更好的控制数据绑定，如下

         然而在1.3+的版本中，angularJS似乎也意识到了ng-model的这一点，所以它开放了API允许我们进行拦截

          只不过，AngularJS讲set和get方法合二为一，这一点也是比较巧妙的。

以上这些问题汇总仅供有需要的同学参考，如有更好的解决方法欢迎在下面留言，共同学习、交流