AngularJS 问题&解决 | 技巧

原创 2015年11月20日 12:20:25

目录:

1)文件类型的input添加ng-model,选择文件之后在controller里面获取为undefined。

(2)想让多个<tr>为一组进行repeat

(3)在较慢设备上避免angular的内联模版表达式对用户可见。

(4)ng-switch用法

(5)在ng-repeat 中使用ng-hide或ng-if6)使用ng-href设置a标签的href

(7select中ng-options 用法

(8)directive 返回对象用法

一、给文件类型的input添加 ng-model,选择文件之后在controller里面获取为undefined。

示例:

<input type="file" ng-model="vm.uploadme" />

在controller里面调用$scope.vm.uploadme值为undefined

解决方法:

I created a workaround with directive:

.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.fileread = loadEvent.target.result;
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
            });
        }
    }
}]);

And the input tag becomes:

<input type="file" fileread="vm.uploadme" />

二、想让多个为一组进行repeat

比如三个tr为一个单元进行循环,因为tr外层不能再嵌一个标签来使用ng-repeat,所以可以使用

<table class="table">
    <tbody>
    <tr ng-repeat-start="item in todos">
      <td> This is item {{$index}}</td>
    </tr>
    <tr>
      <td>The action is : {{item.action}}</td>
    </tr>
    <tr ng-repeat-end>
      <td>Item {{$index}} is {{item.complete ? '' : "not"}} complete</td>
    </tr>
    </tbody>
  </table>

将ng-repeat-start和ng-repeat-end之间的元素进行重复。

三、在较慢设备上避免angular的内联模版表达式对用户可见。

解决方法:

①使用ng-bind指令(不推荐)

②使用ng-cloak指令,放在包含有模版表达式的文档部分。

<div ng-clock>
...
</div>

四、ng-switch 用法

  <div ng-switch on="data.mode">

    <div ng-switch-when="Table">
      <table class="table">
        <thead>
        <tr>
          <th>#</th>
          <th>Action</th>
          <th>Done</th>
        </tr>
        </thead>
        <tr ng-repeat="item in todos" ng-class="$odd ? 'odd' : 'even'">
          <td>{{ $index + 1 }}</td>
          <td ng-repeat="prop in item">{{ prop }}</td>
        </tr>
      </table>
    </div>

    <div ng-switch-when="List">
      <ol>
        <li ng-repeat="item in todos">
          {{item.action}}<span ng-if="item.complete"> ( Done ) </span>
        </li>
      </ol>
    </div>

    <!-- 默认 -->
    <div ng-switch-default>
      Select another options to display a layout
    </div>
  </div>

ng-switch 使用on指定表达式。 data.mode取值为Table、List、None,根据用户输入切换视图。

五、在 ng-repeat 中使用 ng-hideng-if

对表格使用Bootstrap的table-striped样式,但需要根据一些条件隐藏某些行,当使用ng-hide时,可能会造成条纹状不间隔。

<table class="table table-striped">
    <thead>
        ...
    </thead>
    <tr ng-repeat="item in todos" ng-hide="item.complete">
        ...
    </tr>
</table>

但是将ng-hide换为ng-if会报错。

解决方案:

使用过滤器。

<tr ng-repeat="item in todos | filter: {complete: 'false'}">

六、使用 ng-href 设置a标签的href

<a ng-href="{{link}}">link me</a>

与之相同的还有img元素的ng-srcng-srcset

七、select中 ng-options 用法

options="item.id as item.action for item in todos"

代表 <ng-model 使用的值> as <option 中显示的值> for <变量名> in <数组>

例:

<!-- HTML -->
<select ng-options="item.id as item.name for item in itemlist" ng-model="chooseItem"></select>
//控制器中
$scope.chooseItem = "ccc";
$scope.itemlist = [
  {
    id: "aaa",
    name: "AngularJS"
  }, {
    id: "bbb",
    name: "我勒个擦"
  }, {
    id: "ccc",
    name: "呵呵"
  }
];

下拉框中分别是”AngularJS”、”我勒个擦”、”呵呵”,且将默认选中 呵呵

八、directive 返回对象用法

.controller("DemoCtrl", function($scope){
  $scope.name = "呵呵哒";
})
.directive("directiveDemo", function () {
  return {
    //链接函数,三个参数分别为:作用域、元素(jQLite对象数组)、属性集
    link: function (scope, element, attrs) {
      //呵呵哒
      console.log(scope.name);
      //2015
      console.log(element.eq(0).attr("renrenche"));
      //2015
      console.log(attrs["renrenche"]);
    }
  }
})
<!-- HTML -->
<body ng-controller="DemoCtrl">
  <directive-demo renrenche="2015"></directive-demo>
</body>

(2)template

return {
    //将指令内容表示为HTML
    template: "<div>2015</div>"
    //或函数形式,参数分别为元素、属性集
    template: function(element, attr){
      return "<div>" + attr["renrenche"] + "</div>"
    }
}

效果:

<directive-demo renrenche="2015">
  <div>2015</div>
</directive-demo>

(3)replace

注意:属性会转移到模版内容中

return {
    //将指令内容表示为HTML
    template: "<div>2015</div>"
    //布尔值
    replace: true
}

值为true时,将指令替换为模版内容,默认为false。

效果:

<div renrenche="2015">2015</div>

(4)templateUrl

用外部模版进行替换,与template用法相似。只是把模版内容换为url。

return {
    templateUrl: "tamplateDemo.html"
    //或函数形式,参数分别为元素、属性集
    template: function(element, attr){
      return "tamplateDemo.html";
    }
}

(5)restrict

指定指令如何被使用

return {
    restrict: "EACM"
}

取值:

E: Element 元素

<directiveDemo></directiveDemo>

A: Attribute 属性

<div directive-demo></div>

也可以赋值

<div directive-demo="renrenche"></div>

参数通过attr["directiveDemo"]获取

C: Class 类名(不常用)

<div class="directive-demo"></div>

也可以提供配置值,angular会当作属性呈现该信息

<div class="directive-demo:renrenche"></div>

参数通过attr["directiveDemo"]获取

M: Comment 注释(不常用)

必须以directive单词开始,跟随一个冒号、指令名以及可选参数。(实在感觉这种方式太难用,不作过多介绍)

<!-- directive: directive-demo renrenche -->

默认为EA,也是最常用的两种方式。

(6)scope

为指令创建一个新的作用域或者隔离的作用域

使用一:布尔值,创建一个新的作用域

return {
    scope: true
}

例:对于如下例子,任一input内容发生变化,另外一个都将跟随改变,因为他们共享一个作用域

.controller("DemoCtrl", function($scope){
  $scope.name = "呵呵哒";
})
.directive("directiveDemo", function () {
  return {
    template: "<input type='text' ng-model='name'>",
    replace: true,
  }
})
<!-- HTML -->
<div ng-controller="DemoCtrl">
  <directive-demo></directive-demo>
  <directive-demo></directive-demo>
</div>

如果想让它们分别有自己的作用域,设置scope为true即可。

.directive("directiveDemo", function () {
  return {
    template: "<input type='text' ng-model='name'>",
    replace: true,
    scope: true
  }
})

但是如果访问的是挂载在一个对象上的属性时,将保持同步,如:

.controller("DemoCtrl", function($scope){
  $scope.data = {
    name: "呵呵哒"
  }
})
.directive("directiveDemo", function () {
  return {
    template: "<input type='text' ng-model='data.name'>",
    replace: true,
    scope: true
  }
})

使用二:创建一个隔离的作用域

return {
    scope: {}
}

此时指令将不继承所在的控制器的作用域。即对于上面的例子而言,此时将访问不到namedata.name等属性。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

【js类库AngularJs】解决angular+springmvc的post提交问题

AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核...

解决Angularjs中循环网络请求回调中值的调用问题

问题原型: var data=[0,1,2,3]; for(var i=0;i

angularjs解决跨域问题

首先我来声明一下“跨域”这个问题都有哪些类型: 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(ifra...

AngularJS动态增加dom,导致里面ng-click、modal绑定失效的问题解决方法

AngularJS动态增加dom,导致里面ng-click、modal绑定失效的问题解决方法

angularJS的$watch失效问题的解决方案

$watch方法,它可以帮助我们在每个scope中监视其中的变量。 $watch 单一的变量 对于普通的变量时,如数字,字符串等,直接如下写是可以监视到变量的变化,并执行相应的函数的。 $sco...

AngularJS进阶(三十八)上拉加载问题解决方法

AngularJS上拉加载问题解决方法      项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时...

AngularJS进阶(二十八)解决AngualrJS页面刷新导致异常显示问题

解决AngualrJS页面刷新导致异常显示问题 绪           俗话说,细节决定成败,编程亦是如此。编程过程中我们可能会不自觉的忽视一些细节问题,殊不知,这些细节正是导致页面显示出现问题的...

AngularJs最简单解决跨域问题jsonp案例

原文地址:http://www.manks.top/angularjs_ajax_jsonp.html 首先我们做点准备说明,不然你明白我说的是啥意思别人不明白,就算别人明白了那总有人不明白,那你要...

Angularjs 初始化未加载完毕闪烁问题解决 ng-cloak

Html代码      h3 ng-repeat="aricle in list">a href="{{aricle.url}}">{{$index+1}}、{{aricle.titl...

用angularjs遇到的一些问题及解决方案

**这是我之前用ionic做ios客户端的时候遇到的一些问题,当时因为没有写博客,所以记录到word里,现在将它分享出来,供大家参考参考,也希望给一些宝贵意见。 Ionic是一个前端的框架,帮助开发者...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJS 问题&解决 | 技巧
举报原因:
原因补充:

(最多只允许输入30个字)