Angular新手可能遇到的问题

最新推荐文章于 2021-11-29 15:39:18 发布

吴杼恩

最新推荐文章于 2021-11-29 15:39:18 发布

阅读量1.3k

点赞数 1

分类专栏： AngularJS知识点汇总文章标签： AngularJS ng-include Angular排序没有效果

AngularJS知识点汇总专栏收录该内容

31 篇文章 0 订阅

订阅专栏

Q1：<section ng-include="partials/setting.html"> </section> 错在哪里？怎么html加载不出来！

正确写法：

<section ng-include=" 'partials/setting.html' ">

注意:

1：双引号和单引号之间有空格

2：确保页面是在服务器上就是或要用http协议访问页面

Q2:点击表头排序没有效果？

 <th     ng-repeat="x in head_data"  >
      <span ng-click="sort_text='{{x.sort}}';desc=!desc">      {{x.name}}</span>
</th>

如果你的表头是用“ng-repeat”生成出来的，那么很不幸的告诉你，排序的效果是没有的！

把它换成下面的直接输出方法就可以了。至于原因，我也不知道。估计表头不是用对象方式输出，直接输出的是名字估计也是可以的，这个我没有去试。

     <tr>
                <th  ng-click="sort_text='pid';desc=!desc" >ID</th>
                <th  ng-click="sort_text='fname';desc=!desc" >first name</th>
                <th  ng-click="sort_text='lname';desc=!desc" >last name</th>
                <th  ng-click="sort_text='logname';desc=!desc" >login name</th>
                <th  ng-click="sort_text='company';desc=!desc" >company</th>
                <th  ng-click="sort_text='email';desc=!desc" >email</th>
                <th>notifications</th>
                <th >active</th>
                <th>assume</th>
                <th>edit</th>
         </tr>

Q3:ng-keyup(fun())怎么木有反应?用"ui-bootstrap-tpls-1.1.1.min.js"时候'ui.bootstrap' 怎么一直报错?

坑爹的!angular版本太低了!换高版本的就可以了!

Q4:高版本的angular中我用定义函数方式["* Controllers */function ctrDataList($scope) {......})]定义控制器,怎么一直报错说没有这个函数?

坑爹了!它不支持这样定义控制器!换成"ngular.module('ui.setting.controllers', [ ]) .controller('ctrDataList', function($scope) {})"就可以了.

Q5:angular中"ng-click="removeNewTab({{tab.id}})"这样给函数传参是不对的

正确的写法:ng-click="removeNewTab(tab.id)"

Q6:angular中ng-class="{1: 'green', -1: 'red',0:'y'}[j.status]"中的”-1“不起作用，控制台报错

Error: [$parse:syntax] Syntax Error: Token '-' invalid key at column 14 of the expression [{1: 'green', -1: 'red',0:'y'}[j.status]] starting at [-1: 'red',0:'y'}[j.status]].

正确的做法：把-1用引号括起来即可

见修改代码

ng-class="{1: 'green', -1: 'red',0:'blue'}[j.status]"

Q7IE11下get请求缓存问题，页面绑定数据不及时更新的bug

在项目开发的过程中，我曾经发现过一个奇葩的问题，就是在IE11浏览器下，当点击某个button触发一个函数，从而改变ng-model绑定的某个变量时，明确变量的值已经改变，但是只有在F12开启开发者调试工具时，页面才能及时更新显示改变后的变量值，一旦F12开发者调试工具关闭，变量值将不更新。但是这一现象在chrome、firefox下确不曾见，究其原因竟是IE浏览器下ajax请求缓存的问题，后来把缓存禁用后，竟恢复正常了。具体解决方法就是：在配置路由的angularJS文件中，添加如下配置代码即可：

Q8：angular中的unsafe问题

在项目中，之前遇到过这样的问题，就是当给一个ios应用上传安装包和plist文件后，一般这个ios应用的下载地址就会变为：

“itms-services:///?action=download-manifest&url=https://dn-touchc-test.qbox.me/test2.plist”这样的样子，但是当我们把这样的字符串放到<a>标签的href属性中时，其会自动在上述字符串之前加上“unsafe：”的字符串：如下图所示：

而这个这样加了“unsafe：”字样的链接被我们复制到手机浏览器里进行下载则会报找不到。

解决办法就是：在angular配置路由的配置文件中加入如下配置代码：

再来看结果：

原来angular对href是有安全检查的，只能生成它认为安全的链接。AngularJS真是为我们的安全操碎了心……而我也更加明白了{{}}并不是一个简单的模板替换，它真的把我们的html重新编译了一遍。

Q9使用ng-repeat或ng-options进行数据循环时，track by的使用

在使用ng-repeat进行数据循环时，如果后端数据库采用的是moogodb的话，当 ng-repeat 的数组被替换时, 它默认并不会重新利用已有的 Dom 元素，而是直接将其全部删除并重新生成新的数组 Dom 元素，Dom 的频繁操作是非常不友好的，为什么 ng-repeat 不能利用已有的 dom 元素去更新数据呢？因为你没有把数组元素的标识属性告诉它，那么两次替换的时候它就没办法追踪了，所以当首次使用ng-repeat渲染出列表数据，再次请求渲染数据的时候，ng-repeat会往数组中每个元素加上$$hashKey属性，这个 key 是由 Angular 内部的 nextUid() 方法生成，类似数据库自增，但是是使用字符串。因此，我们使用 track by 来避免，例如：

$index表示默认的索引（自动递增），item.id是数据的主键值。

Q10：$apply的使用

之前在微信端修改个人设置的页面时，接口没有返回用户的相关信息，只有通过另一个接口去获取用户的具体信息，但是这个过程中发现拿到用户的具体信息重新给$scope.userData赋值后，虽然model值改变了，但是页面并没有及时更新，主要原因是angular没有检测到数据变化，所以此时需要我们手动通知angular数据改变，如下代码所示：

Q11如何解决AngularJs在IE下取数据总是缓存的问题

.config(['$httpProvider',function($httpProvider){
    // Initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};
    }

    // Enables Request.IsAjaxRequest() in ASP.NET MVC
    $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';

    // Disable IE ajax request caching
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}])