AngularJs中控制器、數(shù)據(jù)綁定、作用域的示例分析

發(fā)布時(shí)間：2021-08-07 09:57:30 來(lái)源：億速云閱讀：110 作者：小新欄目：web開(kāi)發(fā)

小編給大家分享一下AngularJs中控制器、數(shù)據(jù)綁定、作用域的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

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ì)控制器的作用及控制器中都需要寫(xiě)什么代碼有些不了解，有的人會(huì)把整個(gè)代碼都推擠到控制器中，我個(gè)人覺(jué)得控制器只是一個(gè)頁(yè)面view及mode的一個(gè)紐帶，只處理一些數(shù)據(jù)綁定，事件綁定等等一些列簡(jiǎn)單的邏輯，具體的服務(wù)器訪問(wèn)或者數(shù)據(jù)讀取等應(yīng)該在服務(wù)里去實(shí)現(xiàn)，服務(wù)我在下次的時(shí)候會(huì)詳細(xì)給大家說(shuō)。

我簡(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ù)過(guò)濾、數(shù)據(jù)操作。

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

2、作用域（$scope）

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

AngularJs中控制器、數(shù)據(jù)綁定、作用域的示例分析

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

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

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

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

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

該方法是最為常見(jiàn)的，表達(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á)式綁定 -->
  <h2>{{expression}}</h2>
  <!-- 2、指令綁定-->
  <h3>{{ngmodel}}</h3>
  <input type="text" ng-model="ngmodel">
  <!--  3、ng-bind綁定-->
  <h4 ng-bind="ngbind"></h4>
  <h4 class="ng-bind:ngbind"></h4>
  <!--  4、ng-bind-html綁定-->
  <h5 ng-bind-html="htmlbind"></h5>
  <!--  5、ng-bind-template -->
  <h6 ng-bind-template="{{ngbind}},{{1+1}}"></h6>
</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>

看完了這篇文章，相信你對(duì)“AngularJs中控制器、數(shù)據(jù)綁定、作用域的示例分析”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

AngularJs中控制器、數(shù)據(jù)綁定、作用域的示例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

AngularJs中控制器、數(shù)據(jù)綁定、作用域的示例分析