快捷導(dǎo)航

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

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

下面小編就為大家?guī)?lái)一篇詳談AngularJs 控制器、數(shù)據(jù)綁定、作用域。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

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

1、控制器：

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

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

//  控制器定義
  //  第一參數(shù)： 控制器名稱， 第二個(gè)參數(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某個(gè)標(biāo)簽上）添加ng-controller。

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

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

我簡(jiǎn)單對(duì)控制使用方面注意的事項(xiàng)整理了一下，供大家參考：

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

2）不要復(fù)用Controller,一個(gè)控制器一般只負(fù)責(zé)一小塊視圖。

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

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

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

2、作用域（$scope）

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

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

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

1）表達(dá)式{{}}：

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

表達(dá)式：{{a+b}}

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

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

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

3）ng-model：

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

4）ng-bind-html：

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

5）ng-bind-template：

該方式可以一次綁定多個(gè)變量及表達(dá)式。

使用場(chǎng)景：

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

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

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

<head>
  <meta charset="UTF-8">
  <title>首頁(yè)</title>
  <!--引用AngularJs庫(kù)  -->
  <script type="text/javascript" src="/lib/angular-1.3.0.14/angular.js"></script>
  <!--  引入angularJs Html格式化庫(kù)-->
  <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、表達(dá)式綁定 -->
  <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>
  //模塊定義
  // 第一個(gè)參數(shù)：應(yīng)用名稱，第二個(gè)參數(shù)：應(yīng)用依賴模塊
  var app = angular.module('myapp', ['ngSanitize']);

  //  控制器定義
  //  第一參數(shù)： 控制器名稱， 第二個(gè)參數(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ù)綁定、作用域就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: