首頁 > 文章 > web前端 > 深入了解Angularjs中的視圖和指令

深入了解Angularjs中的視圖和指令

青灯夜游轉載: 2021-09-03 18:22:151295瀏覽

這篇文章帶大家了解一下Angularjs中的視圖和指令，希望對大家有幫助！

AngularJS 視圖和指令介紹

在第一篇文章中您看到了AngularJS 如何將應用程式拆分為視圖、控制器和模型(MVC)。本文將深入探討如何建立 AngularJS 視圖。【相關教學推薦：《angular教學》】

在開始之前，讓我先設定一個簡單的AngularJS 應用程序，您可以使用它來體驗本文中的範例：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>

<body ng-app="myapp">

  <div ng-controller="MyController" >
      <span></span>
  </div>

  <script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
      //empty controller function
    });
  </script>

</body>
</html>

AngularJS 指令

AngularJS 視圖將模型中的資料混合到HTML 模板中。您可以使用 AngularJS指令來告訴 AngularJS 如何將資料混合到 HTML 範本中。本文將涵蓋最常用的 AngularJS 指令。

插值指令

插值指令是 AngujarJS 中最基本的指令之一。插值指令將表達式的結果插入 HTML 範本中。您可以使用{{ }}符號標記插入表達式的位置。以下是一個範例：

<div ng-controller="MyController" >
    <span> {{myData.text}} </span>
</div>

HTML 範本包含在div具有ng-controller 屬性的元素中。 HTML 模板內部是一個span元素，內部是一個插值指令。該指令指示 AngularJSmyData.text在給定位置插入資料值。

插值指令也可以插入從模型物件的函數傳回的資料。以下是一個範例：

 <div ng-controller="MyController" >
      <span>{{myData.textf()}}</span>
  </div>

  <script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
      $scope.myData = {};
      $scope.myData.textf = function() { return "A text from a function"; };
    });
  </script>

在此範例中，插值指令{{myData.textf()}}將呼叫模型物件myData.textf()上的函數$scope，並將從函數傳回的文字插入HTML 模板中。

該textf()函數被插入到$scope.myData控制器函數內的物件中，如您在範例中所見。

ng-bind 指令

該ng-bind指令是插值指令的替代。您可以透過ng-bind在您希望 AngularJS 插入資料的 HTML 元素中插入屬性來使用它。下面是一個範例：

<div ng-controller="MyController" >
  <span ng-bind="myData.textf()"></span>
</div>

這會將myData.text()函數傳回的資料插入到span元素的主體中。請注意屬性{{ }}內的表達式周圍的不是必需的ng-bind。

從模型轉義 HTML

如果從模型取得的資料包含 HTML 元素，則這些元素在插入 HTML 範本之前會被轉義。轉義意味著 HTML 顯示為文本，而不是 HTML。

這樣做是為了防止 HTML 注入攻擊。例如，在聊天應用程式中，有人可能會3f1c4e4b6b16bbbd69b2ee476dc4f83a在聊天訊息中插入帶有 JavaScript的元素。如果此元素未轉義，則任何看到聊天訊息的人都可能會3f1c4e4b6b16bbbd69b2ee476dc4f83a執行該元素。隨著 HTML 轉義，3f1c4e4b6b16bbbd69b2ee476dc4f83a 元素將只顯示為文字。

您可以使用ng-bind-html-unsafe指令來停用HTML 轉義，如下所示：

<div ng-controller="MyController" >
  <span ng-bind-html-unsafe="myData.textf()"></span>
</div>

在停用HTML 轉義時，您應該非常小心。確保沒有顯示不受信任的 HTML。

條件渲染

AngularJS 可以根據模型中資料的狀態顯示或隱藏 HTML。您可以使用一組專門為此目的創建的 AngularJS 指令。我將在以下部分中介紹這些指令。

ng-show ng-hide 指令

的ng-show 和ng-hide指令用於顯示或隱藏根據模型中的資料的HTML元素。這兩個指令做同樣的事情，但彼此相反。這裡有兩個範例：

  <div ng-controller="MyController" >
      <span ng-show="myData.showIt"></span>
      <span ng-hide="myData.showIt"></span>
  </div>

  <script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
      $scope.myData = {};
      $scope.myData.showIt = true;
    });
  </script>

此範例建立兩個span元素。一個有一個ng-show指令，另一個有一個ng-hide指令。這兩個指令都會檢視myData.showIt 布林變數以決定它們是否應該顯示或隱藏span元素。此ng-show 指令將顯示元素如果模型值為true，並隱藏元素如果模型值為false。此ng-hide指令將執行相反的操作：span如果模型值為 true，則隱藏元素，如果模型值為 false，則顯示它。

注意控制器函数如何将设置myData.showIt为true。这意味着上面的示例将显示第一个 span 元素并隐藏第二个。

HTML 元素（span在本例中为元素）使用 CSS 属性隐藏display: none;。这意味着 HTML 元素仍然存在于 DOM 中。它们只是不可见。

ng-switch 指令

ng-switch如果您想根据模型中的数据从 DOM 中添加或删除 HTML 元素，则使用该指令。下面是一个例子：

<div ng-controller="MyController" >
    <div ng-switch on="myData.switch">
        <div ng-switch-when="1">Shown when switch is 1</div>
        <div ng-switch-when="2">Shown when switch is 2</div>
        <div ng-switch-default>Shown when switch is anything else than 1 and 2</div>
    </div>
</div>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
      $scope.myData = {};
      $scope.myData.switch = 3;
    });
</script>

此示例包含一个div具有ng-switch属性和on属性的元素。该on属性指示要打开模型中的哪些数据。

div元素内部是三个嵌套div元素。前两个嵌套div元素包含一个ng-switch-when属性。该属性的值告诉on父属性中引用的模型数据div应该具有什么值，以便嵌套div可见。在此示例中，第一个嵌套div在myData.switch为 1时可见，第二个嵌套div在myData.switch为 2时可见。

该third嵌套div有一个ng-switch-default属性。如果没有其他ng-switch-when指令匹配，则显示div withng-switch-default属性。

在上面的示例中，控制器函数设置myData.switch为 3。这意味着将显示嵌套div的ng-switch-default属性。另外两个嵌套div元素将从 DOM 中完全删除。

ng-if 指令

该ng-if指令可以包括/从DOM删除HTML元素，就像ng-switch指令，但它有一个简单的语法。下面是一个例子：

<div ng-controller="MyController" >
    <div ng-if="myData.showIt">ng-if Show it</div>
</div>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
        $scope.myData = {};
        $scope.myData.showIt = true;
    });
</script>

ng-if和ng-show+ 之间的主要区别ng-hide是 ng-if从 DOM 中完全删除 HTML 元素，而ng-show+ ng-hide只是将 CSS 属性display: none;应用于元素。

ng-include 指令

该ng-include指令可用于将来自其他文件的 HTML 片段包含到视图的 HTML 模板中。下面是一个例子：

<div ng-controller="MyController" >
    <div ng-include="&#39;angular-included-fragment.html&#39;"></div>
</div>

T此示例将文件包含angular-included-fragment.html到div具有ng-include属性的 HTML 模板内。注意文件名是如何引用的（单引号）。

您可以根据条件包含 HTML 片段。例如，您可以在两个文件之间进行选择，如下所示：

<div ng-controller="MyController" >
    <div ng-include="myData.showIt &&
                        &#39;fragment-1.html&#39; ||
                        &#39;fragment-2.html&#39;"></div>
</div>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
        $scope.myData = {};
        $scope.myData.showIt = true;
    });
</script>

此示例将包括fragment-1.htmlifmyData.showIt为 true 和fragment-2.htmlifmyData.showIt为 false。

ng-repeat 指令

该ng-repeat指令用于迭代一组项目并从中生成 HTML。在初始生成之后，ng-repeat监视用于生成 HTML 的项目的更改。如果项目发生变化，该ng-repeat指令可能会相应地更新 HTML。这包括重新排序和删除 DOM 节点。

这是一个简单的ng-repeat例子：

<ol>
   <li ng-repeat="theItem in myData.items">{{theItem.text}}</li>
</ol>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
        $scope.myData = {};
        $scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"} ];
    });
</script>

此示例将为数组中的li每个项目创建一个元素myData.items。

您还可以迭代从函数调用返回的集合。下面是一个例子：

<ol>
   <li ng-repeat="theItem in myData.getItems()">{{theItem.text}}</li>
</ol>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
        $scope.myData = {};
        $scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"} ];
        $scope.myData.getItems = function() { return this.items; };
    });
</script>

您可以使用稍微不同的语法迭代 JavaScript 对象的属性：

<ol>
   <li ng-repeat="(name, value) in myData.myObject">{{name}} = {{value}}</li>
</ol>

<script>
    angular.module("myapp", [])
    .controller("MyController", function($scope) {
        $scope.myData = {};
        $scope.myData.myObject = { var1 : "val1", var2 : "val3", var3 : "val3"};
    });
</script>

注意指令的(name, value)部分ng-repeat。这会通知 AngularJS 迭代对象的属性。该name 参数将被绑定到的属性名称和value参数将被绑定到的属性值。该name和value参数可以输出到HTML模板，就像任何其他JavaScript变量或对象的属性，你可以从上面的HTML模板见。

特殊的 ng-repeat 变量

该ng-repeat指令定义了一组特殊变量，您可以在迭代集合时使用这些变量。这些变量是：

$index
$first
$中
$last

该$index变量包含被迭代元素的索引。

的$first，$middle并且$last包含根据当前的项目是否正在迭代集合中的第一，中间或最后一个元素的布尔值。如果一个项目既不是第一个也不是最后一个，它就是“中间”。您可以使用这些变量使用例如生成不同的HTML ng-show/ ng-hide，ng-switch， ng-if和ng-include指令如前所述。

重复多个元素

到目前为止，您只看到了如何使用ng-repeat. 如果您想重复多个 HTML 元素，您必须将这些元素嵌套在容器元素中，并让容器元素具有该ng-repeat 元素，如下所示：

<div ng-repeat="(name, value) in myData.myObject">
   <div>{{name}}</li>
   <div>{{value}}</li>
</div>

但是，将要重复的元素包装在根元素中可能并不总是可行的。因此 AngularJS 有ng-repeat-start和ng-repeat-end指令，用于标记开始和结束重复的元素。下面是一个例子：

<ol>
    <li ng-repeat-start="(name, value) in myData.myObject">{{name}}</li>
    <li ng-repeat-end>{{value}}</li>
</ol>

此示例将为中的li每个属性重复这两个元素 myData.myObject。

过滤

上面介绍的一些指令支持过滤。本节将解释过滤的工作原理。

该ng-repeat指令可以接受这样的过滤器：

<div ng-repeat="item in myData.items | filter: itemFilter"></div>

注意| filter: itemFilter上面声明的部分。那部分是过滤器定义。该| filter:部分告诉 AngularJS 将过滤器应用于 myData.items数组。该itemFilter是过滤函数的名称。此函数必须存在于$scope对象上，并且必须返回 true 或 false。如果过滤器函数返回 true，则ng-repeat指令使用数组中的元素。如果过滤器函数返回 false，则忽略该元素。下面是一个例子：

<script>
  angular.module("myapp", [])
    .controller("MyController", function($scope) {
      $scope.myData = {};
      $scope.myData.items  = [ {text : "one"}, {text : "two"}, {text : "three"}, {text : "four"} ];

      $scope.itemFilter = function(item) {
        if(item.text == "two") return false;
          return true;
        }
      }
    });
</script>

格式化过滤器

AngularJS 带有一组内置格式过滤器，可以与插值指令和ng-bind. 以下是格式过滤器的列表：

过滤器	说明
`date`	根据给定的日期格式将变量格式化为日期
`currency`	将变量格式化为带有货币符号的数字
`number`	将变量格式化为数字
`lowercase`	将变量转换为小写
`uppercase`	将变量转换为大写
`json`	将变量转换为 JSON 字符串

这是一个日期过滤器示例：

<span>{{myData.theDate | date: &#39;dd-MM-yyyy&#39;}}</span>

此示例显示了date可以根据| date: 部分后给出的日期格式模式格式化 JavaScript 日期对象的过滤器。它是myData.theDate 将被格式化为日期的属性。因此，它必须是一个 JavaScript 日期对象。

这是一个数字过滤器示例：

<span>{{myData.theNumber | number: 2}}</span>

此示例将myData.theNumber变量格式化为带有 2 个小数位的数字。

下面是一个小写和大写过滤器示例：

<span>{{myData.mixedCaseText | lowercase}}</span>
<span>{{myData.mixedCaseText | uppercase}}</span>

数组过滤器

AngularJS 还包含一组过滤或转换数组的数组过滤器。这些过滤器是：

数组过滤器：

过滤器	说明
`limitTo`	将数组限制为给定的大小，从数组中的某个索引开始。该`limitTo`过滤器也适用于字符串。
`filter`	通用过滤器。
`orderBy`	根据提供的条件对数组进行排序。

下面是一个limitTo例子：

<span>{{myData.theText | limitTo: 3}}</span>

这将$scope myData.theText变量限制为 3 个字符的长度。如果将此过滤器应用于数组，则该数组将被限制为 3 个元素。

该filter过滤器是一种特殊的过滤器，可以做很多不同的事情。在最简单的形式中，它只是调用$scope对象上的函数。此函数必须返回trueor false。如果过滤器接受传递给它的值，则返回 True。如果过滤器不能接受该值，则返回 False。如果过滤器不能接受该值，则该值不包含在过滤产生的数组中。下面是一个例子：

<ol>
    <li ng-repeat="item in myData.items | filter:filterArray">
        {{item.text}} : {{$first}}, {{$middle}}, {{$last}}
    </li>
</ol>
<script>
    angular.module("myapp", [])
        .controller("MyController", function($scope) {
            $scope.myData = {};
            $scope.myData.items    = 
                [ {text : "one"}, {text : "two"}, {text : "three"}, {text : "four"} ];

            $scope.filterArray = function(item) {
                if(item.text == "two") return false;
                return true;
            }
        } );
</script>

此示例调用filterArray()过滤掉具有text值为的属性的项目的函数two。

下面是一个orderBy例子：

<ol>
    <li ng-repeat="item in myData.items | orderBy:sortField:reverse">
        {{item.text}} : {{$first}}, {{$middle}}, {{$last}}
    </li>
</ol>
    
<script>
    angular.module("myapp", [])
            .controller("MyController", function($scope) {
                $scope.myData = {};
                $scope.myData.items    = [ {text : "one"}, {text : "two"}, {text : "three"}, {text : "four"} ];
                $scope.sortField = "text";
                $scope.reverse   = true;
            } );
</script>

所述orderBy过滤器可以接受一个$scope变量作为参数。在此示例中，该变量名为sortField。此变量的值是已排序数据对象的属性名称，用于对数据对象进行排序。在此示例中，sortField 属性设置为text这意味着数据对象的text属性用于对数据对象进行排序。

该orderBy过滤器还可以采取的第二$scope变量作为参数。在此示例中，该变量名为reverse。该变量的值决定了数据对象是按自然顺序排序，还是按自然顺序排序。在这种情况下，reverse变量设置为true，这意味着数据对象将按相反顺序排序。

链接过滤器

可以通过简单地在过滤器部分中一个接一个地放置更多过滤器来链接过滤器。链接过滤器时，一个过滤器的输出用作链中下一个过滤器的输入。下面是一个例子：

<span>{{myData.theText | limitTo: 5 | uppercase}}</span>

此示例首先myData.theText使用limitTo过滤器将字符串限制为 5 个字符，然后使用过滤器将 5 个字符转换为大写uppercase 。

将过滤器输出分配给变量

可以将过滤器的输出分配给一个临时变量，然后您可以稍后在视图中引用该变量。下面是一个例子：

<ol>
    <li ng-repeat="item in filteredItems = ( myData.items | filter:filterArray) ">
        {{item.text}} : {{$first}}, {{$middle}}, {{$last}}
    </li>
</ol>
<div>{{filteredItems.length}}</div>

此示例将过滤的输出分配给filteredItems变量。该示例然后{{ }}在ol元素下的指令内引用此变量。

实现自定义过滤器

如果 AngularJS 过滤器不适合您的需要，您可以实现自己的过滤器。下面是一个例子：

<div>Filtered: {{myData.text | myFilter}}</div>
    
    
<script>
    var module = angular.module("myapp", []);

    module.filter(&#39;myFilter&#39;, function() {

        return function(stringValue) {
            return stringValue.substring(0,3);
        };
    });
</script>

此示例向 AngularJS 注册了一个过滤器，它可以过滤字符串。过滤器返回字符串的前 3 个字符。过滤器以 name 注册myFilter。正如您在过滤器开头看到的那样，您在引用过滤器时必须使用该名称。

如果您的过滤器需要更多的输入参数，请在过滤器函数中添加更多参数，并在过滤器名称和:引用它时添加参数。下面是一个例子：

<div>Filtered: {{myData.text | myFilter :2:5}}</div>

<script>
    var module = angular.module("myapp", []);

    module.filter(&#39;myFilter&#39;, function() {

        return function(stringValue, startIndex, endIndex) {
            return stringValue.substring(parseInt(startIndex), parseInt(endIndex));
        };
    });
</script>

注意过滤器引用 ( | myfilter:2:5) 现在在过滤器名称后面有两个值，每个值用冒号分隔。这两个值作为参数传递给过滤器。还要注意 filter 函数现在如何接受两个名为startIndex和的额外参数endIndex。这两个参数用于确定字符串的哪一部分作为子字符串从过滤器返回

更多编程相关知识，请访问：编程入门！！

以上是深入了解Angularjs中的視圖和指令的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript mvc json css html angular if switch date include Filter 字符串 number 对象 default dom display li

陳述：

本文轉載於：juejin.cn。如有侵權，請聯絡admin@php.cn刪除

上一篇：聊聊利用Node.js 的多執行緒能力怎麼做非同步計算下一篇：聊聊利用Node.js 的多執行緒能力怎麼做非同步計算

看更多