AngularJS 问题&解决 | 技巧

来源：互联网发布：淘宝主图无缝拼接编辑：程序博客网时间：2024/06/06 00:58

（1）文件类型的input添加ng-model，选择文件之后在controller里面获取为undefined。（2）想让多个<tr>为一组进行repeat（3）在较慢设备上避免angular的内联模版表达式对用户可见。（4）ng-switch用法（5）在ng-repeat 中使用ng-hide或ng-if（6）使用ng-href设置a标签的href（7）select中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-hide` 或 `ng-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-src个ng-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` 返回对象用法

（1） link

.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: {}}

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

0 0