快捷導航

詳談AngularJs 控制器、數(shù)據(jù)綁定、作用域

更新時間：2017年07月09日 18:12:24 投稿：jingxian

下面小編就為大家?guī)硪黄斦凙ngularJs 控制器、數(shù)據(jù)綁定、作用域。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

上次分享完該系列文章后有朋友也建議說1.x版本除了維護也沒有必要學習，可以學習2.0開始學習，我也知道1.x無論是從性能還是架構(gòu)上都沒有2.x好，但是我想因為現(xiàn)在也有一些朋友還在用1.x版本，因為1.x升級到2.x難度很大，甚至可以說重構(gòu)，就向我們公司現(xiàn)在還在用1.x版本，所以我還是決定把這系列寫完，也給自己一個整理的過程。本人現(xiàn)在也正在學習Angular4.0版本的學習，但是4.0用typescript及nodejs集成比較大，還有學習angular-cli腳手架的學習，所以等我學會以后準備在分享給大家。這個暫時先不討論，今天繼續(xù)給大家分享控制、數(shù)據(jù)綁定、作用域的知識點。

1、控制器：

概念：在angularJS中控制器是一個函數(shù)，用來向視圖的作用域添加額外的功能，用來設(shè)置作用域的初始狀態(tài)并添加自定義行為。

控制器的聲明： app.controller(‘controllerName',function($scope){...})

//  控制器定義
  //  第一參數(shù)： 控制器名稱， 第二個參數(shù)： 匿名函數(shù)， 傳入作用域,并在作用域上添加額外功能
  app.controller('myCtrl', function($scope) {
    $scope.expression = "hello expression";
    $scope.ngbind = "hello ng-bind";
    $scope.htmlbind = "<font color='red'>hello,htmlbind</font>";
    $scope.subCtrl = "hello subCtrl";

  });

控制器的使用：在需要的地方（html某個標簽上）添加ng-controller。

<body ng-app="myapp" ng-controller="myCtrl">

從上面看控制的定義和使用還是比較簡單的，但是很多人會對控制器的作用及控制器中都需要寫什么代碼有些不了解，有的人會把整個代碼都推擠到控制器中，我個人覺得控制器只是一個頁面view及mode的一個紐帶，只處理一些數(shù)據(jù)綁定，事件綁定等等一些列簡單的邏輯，具體的服務(wù)器訪問或者數(shù)據(jù)讀取等應(yīng)該在服務(wù)里去實現(xiàn)，服務(wù)我在下次的時候會詳細給大家說。

我簡單對控制使用方面注意的事項整理了一下，供大家參考：

1）盡可能精簡控制器和$scope相關(guān)的操作。

2）不要復用Controller,一個控制器一般只負責一小塊視圖。

3）不要在Controller中操作DOM，這不是控制器的職責。

4）盡量不要在Controller里做數(shù)據(jù)過濾、數(shù)據(jù)操作。

5）一般來說，Controller里不會互相調(diào)用的，控制器之間的交互會通過事件進行

2、作用域（$scope）

上面控制器中也提到作用域，控制器主要跟$scope相關(guān)的操作，我簡單給大家說一下作用域在AngularJs中的作用及他的生命周期，我用內(nèi)部分享時的總結(jié)貼出來給大家分享一下：

3、數(shù)據(jù)綁定：

AngularJs數(shù)據(jù)綁定也有好幾種綁定，我給大家列出來，有可能大家都用過，有可能有的朋友有些綁定沒有用過。

1）表達式{{}}：

常量：{{‘const'}}
變量：{{abc}}
函數(shù)：{{func()}}

表達式：{{a+b}}

該方法是最為常見的，表達式綁定，只要在Angular的作用域范圍之內(nèi)Angular遇到該表達式自動解析為Html識別的表達式或者變量。

2）指令方式（ng-bind）：

該綁定方式為在元素上添加ng-bind指令，然后Angular解析指令并執(zhí)行該綁定。

3）ng-model：

該方式主要用在表單提交方面用的比較多，實現(xiàn)數(shù)據(jù)雙向綁定，頁面內(nèi)容及model之間實現(xiàn)雙向數(shù)據(jù)。

4）ng-bind-html：

該方式為主要針對Html元素綁定時用，因為Angularjs默認對Html標簽不做解析，直接輸出，所以想在頁面上顯示Html標簽內(nèi)容可以借助該綁定方法，但是該綁定需要引用一個序列化js文件。

5）ng-bind-template：

該方式可以一次綁定多個變量及表達式。

使用場景：

首頁使用ng-bind，模板里面的頁面可以使用括號 {{}}，表單使用ng-model，{{}}語法的缺陷：在用戶的不斷刷新中是有可能看到{}的；而且在網(wǎng)絡(luò)不好的情況下也有可能看到

如下代碼為把上述五種方法的整體代碼：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>首頁</title>
  <!--引用AngularJs庫  -->
  <script type="text/javascript" src="/lib/angular-1.3.0.14/angular.js"></script>
  <!--  引入angularJs Html格式化庫-->
  <script type="text/javascript" src="/lib/angular-1.3.0.14/angular-sanitize.min.js"></script>
</head>

<!--  數(shù)據(jù)綁定方式1、{{}} 2、指令綁定 3、ng-bind綁定 4、ng-bind-html綁定 5、ng-bind-template綁定-->

<body ng-app="myapp" ng-controller="myCtrl">
  <!--  1、表達式綁定 -->
  <h1>{{expression}}</h1>
  <!-- 2、指令綁定-->
  <h2>{{ngmodel}}</h2>
  <input type="text" ng-model="ngmodel">
  <!--  3、ng-bind綁定-->
  <h3 ng-bind="ngbind"></h3>
  <h3 class="ng-bind:ngbind"></h3>
  <!--  4、ng-bind-html綁定-->
  <h4 ng-bind-html="htmlbind"></h4>
  <!--  5、ng-bind-template -->
  <h5 ng-bind-template="{{ngbind}},{{1+1}}"></h5>
</body>

</html>
<script>
  //模塊定義
  // 第一個參數(shù)：應(yīng)用名稱，第二個參數(shù)：應(yīng)用依賴模塊
  var app = angular.module('myapp', ['ngSanitize']);

  //  控制器定義
  //  第一參數(shù)： 控制器名稱， 第二個參數(shù)： 匿名函數(shù)， 傳入作用域,并在作用域上添加額外功能
  app.controller('myCtrl', function($scope) {
    $scope.expression = "hello expression";
    $scope.ngbind = "hello ng-bind";
    $scope.htmlbind = "<font color='red'>hello,htmlbind</font>";
    $scope.subCtrl = "hello subCtrl";

  });

</script>

以上這篇詳談AngularJs 控制器、數(shù)據(jù)綁定、作用域就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: