辰煦湲
辰煦湲

《AngularJS权威教程》笔记（8-10）——指令简介、内置指令、指令详解

  • 1. 指令简介
    • (1) 指令：自定义HTML元素和属性
      • [1] HTML引导
      • [2] 我们的第一个指令
      • [3] 创建合法指令
      • [4] 表达式
    • (2) 向指令中传递数据
      • [1] 传递数据
      • [2] 动态传递
  • 2. 内置指令
    • (1) 基础ng属性指令
      • [1] 布尔属性
        • 1) ng-disabled
        • 2) ng-readonly
        • 3) ng-checked
        • 4) ng-selected
      • [1] 类布尔属性
        • 1) ng-href
        • 2) ng-src
    • (2) 在指令中使用作用域
      • [1] ng-app
      • [2] ng-controller
      • [3] ng-include
      • [4] ng-switch
      • [5] ng-view
      • [6] ng-if和ng-show/ng-hide
      • [7] ng-repeat
      • [8] ng-init
      • [9] {{}}和ng-bind
      • [10] ng-cloak
      • [11] ng-bind-template
      • [12] ng-model
      • [13] ng-change
      • [14] ng-form
      • [15] ng-click
      • [16] ng-select
      • [17] ng-submit
      • [18] ng-class
      • [18] ng-attr-(suffix)
  • 3. 指令详解
    • (1) 指令定义
      • [1] restrict（字符串）
      • [2] priority（数值）
      • [3] terminal（布尔型）
      • [4] template（字符串或函数）
      • [5] templateUrl（字符串或函数）
      • [6] replace（布尔型）
    • (2) 指令作用域
      • [1] scope（布尔型或对象）
      • [2] 隔离作用域
    • (3) 绑定策略
      • [1] @
      • [2] =
      • [3] &
      • [4] transclude（布尔型）
      • [5] controller（字符串或函数）
        • 1）$scope
        • 2）$element
        • 3）$attrs
        • 4）$transclude
      • [5] controllerAs（字符串或函数）
      • [5] require（字符串或数组）
    • (4) AngularJS生命周期
      • [1] compile（对象或函数）
      • [2] link

1. 指令简介

(1) 指令：自定义HTML元素和属性

[1] HTML引导

在HTML中要用内置指令ng-app标记出应用的根节点。这个指令需要以属性形式使用，可以写到任何位置，但是写到的开始标签上是最常规的做法。

<html ng-app='myApp'>
    
html>

[2] 我们的第一个指令

下例创建了一个自定义指令。通过AngularJS模块API中的.directive()方法，通过传入一个字符串（指令名称）和一个函数（返回一个对象）来注册一个新指令。

注意：指令名称应用驼峰命名。

<my-directive>my-directive>
angular.module('myApp',[])
  .directive('myDirective',function(){
    return {
      restrict: 'E',
      template: 'Click me to go to Baidu'
    }
  })

这里写图片描述
这样的方式生成的代码如下：

<my-directive>
    <a href="https://baidu.com">Click me to go to Baidua>
my-directive>

但是，我们并不想多增加一个节点，看到my-directive这样的标签，可以在创建是增加replace属性。replace方法会用自定义元素取代指令声明，而不是嵌套在其内部。

angular.module('myApp',[])
.directive('myDirective',function(){
  return {
    restrict: 'E',
    replace: true, //----看这里
    template: 'Click me to go to Baidu'
  }
})

得到代码：

<a href="https://baidu.com">Click me to go to Baidua>

[3] 创建合法指令

下面都是创建指令的合法格式：

 <my-directive>my-directive>       
 <div my-directive>div>            
 <div class='my-directive'>div>

主要在指令定义中的restrict设置。说明可以用哪种声明格式来匹配指令定义。

上例中，restrict: 'E'，表明只能使用元素的方式。如果允许所有类型，可改为restrict: 'EACM'，以此类推。

推荐使用属性方式，也就是A，因为有比较好的跨浏览器兼容性。特别对于IE浏览器。

[4] 表达式

指令可以用属性的形式调用，尝试下给属性赋值：

<h1 ng-init="greeting='Hello World'">
  The greeting is {{greeting}}
h1>

得到结果为：The greeting is Hello World

上例中，将表达式greeting='Hello World'赋值给内置指令gn-init。

(2) 向指令中传递数据

[1] 传递数据

上面go to baidu的那个例子中,如果不将URL和链接文本混在指令内部，可以提供更好的体验。所以，让其接受两个变量。
改为:

my-directive my-url='http://baidu.com' my-link-text='Click me to go to Baidu'></div> 
template: '{{myLinkText}}'

运行结果并未生效。AngularJS允许通过创建新的子作用域或者隔离作用域来解决这个问题。

angular.module('myApp',[])
.directive('myDirective',function(){
  return {
    restrict: 'A',
    replace: true,
    scope:{
      myUrl: '@', //----看这里，绑定策略
      myLinkText: '@'//----看这里，绑定策略
    },
    template: '{{myLinkText}}'
  }
})

[2] 动态传递

创建一个文本输入域，将输入的值同指令内部隔离作用域的属性绑定起来。
《AngularJS权威教程》笔记（8-10）——指令简介、内置指令、指令详解_第1张图片

这是书上的实现方式，使用了some-attr进行中转：


"text" ng-model="theirUrl">
<div my-directive 
    some-attr='theirUrl' 
    my-link-text='Click me to go to Baidu'>div> 
angular.module('myApp',[])
.directive('myDirective',function(){
  return {
    restrict: 'A',
    replace: true,
    scope:{
      myUrl: '=someAttr', //----看这里
      myLinkText: '@'
    },
    template: '
{{myLinkText}}
'
  }
})

尝试不适用中转也是可以的：

<label>Their URL field:label>
<input type="text" ng-model="theirUrl">
<div my-directive 
    my-url='{{theirUrl}}' 
    my-link-text='Click me to go to Baidu'>div> 
angular.module('myApp',[])
.directive('myDirective',function(){
  return {
    restrict: 'A',
    replace: true,
    scope:{
      myUrl: '@',
      myLinkText: '@'
    },
    template: '
{{myLinkText}}
'
  }
})

2. 内置指令

所有以ng前缀开头作为命名控件指令都是AngularJS提供的内置指令。因此，不要用ng作为自定义指令的命名前缀。

(1) 基础ng属性指令

以下是和原生HTML标签名称相似的内置指令，仅仅加了ng前缀。

  • ng-href
  • ng-src
  • ng-disabled
  • ng-checked
  • ng-readonly
  • ng-selected
  • ng-class
  • ng-style

[1] 布尔属性

根据HTML标准的定义，布尔属性代表一个true或者false值。当这个属性出现时，值就为true（无论实际定义的值是什么）。如果未出现，值为false。

1) ng-disabled

可以绑定到以下表单输入字段上：