js實例教程-AngularJS數據綁定代碼教程

发布时间:2018-11-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js實例教程-AngularJS數據綁定代碼教程脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小寶典致力於為廣大程序猿(媛)提供高品質的代碼服務,請大家多多光顧小站,小寶典在此謝過。

1、數據->模板

數據到表現的綁定,主要是使用模板標記直接完成的:

<p>{{ w }} x{{ h }}</p>

使用 {{ }}這個標記,就可以直接引用,並綁定一個作用域內的變量。在實現上, ng 自動創建了一個 watcher。效果就是,不管因為什麼,如果作用域的變量發生了改變,我們隨時可以讓相應的頁面表現也隨之改變。我們可以看一個更純粹的例子:

<p id="test" ng-controller="TestCtrl">{{ a }}</p>

<script tyPE="text/javascript">

Angular.module(&#39;app', [],angular.noop)

.controller('TestCtrl', function($scope){

&nbsp;   $scope.a = '123';

});

angular.bootstrap(document.documentElement,['app']);

</script>

上面的例子在頁面載入之後,我們可以在頁面上看到 123。這時,我們可以打開一個終端控制器,輸入:

$('#test').scope().a= '12345';

$('#test').scope().$digest();

上面的代碼執行之後,就可以看到頁面變化了。

對於使用 ng進行的事件綁定,在處理函數中就不需要去關心 $digest() 的調用了。因為 ng 會自己處理。碼中,對於 ng 的事件綁定,真正的處理函數不是指定名字的函數,而是經過 $apply() 包裝過的一個函數。這個 $apply()做的一件事,就是調用根作用域 $rootScope 的 $digest() ,這樣整個世界就清凈了:

<p id="test" ng-controller="TestCtrl"ng-click="click()">{{ a }}</p>

<script type="text/javascript">

angular.module('app', [],angular.noop)

.controller('TestCtrl', function($scope){

    $scope.a = '123';

    $scope.click = function(){

      $scope.a = '456';

    }

});

angular.bootstrap(document.documentElement,['app']);

</script>

那個 click 函數的定義,綁定時變成了類似於:

function(){

  $scope.$apply(

    function(){

      $scope.click();

    }

  )

}

這裡的 $scope.$apply()中做的一件事:

$rootScope.$digest();

2. 模板->數據

模板到數據的綁定,主要是通過 ng-model 來完成的:

<input type="text" id="test" ng-controller="TestCtrl"ng-model="a"/>

<script type="text/javascript">

angular.module('app', [],angular.noop)

.controller('TestCtrl', function($scope){

    $scope.a = '123';

});

angular.bootstrap(document.documentElement,['app']);

</script>

這時修改 input 中的值,然後再在控制終端中使用:

$('#test').scope().a

查看,發現變量 a 的值已經更改了。

實際上, ng-model是把兩個方向的綁定都做了。它不光顯示出變量的值,也把顯示上的數值變化反映給了變量。這個在實現上就簡單多了,只是綁定 change事件,然後做一些賦值操作即可。不過 ng 里,還要區分對待不同的控件。

3. 數據->模板->數據->模板

現在要考慮的是一種在現實中很普遍的一個需求。比如就是我們可以輸入數值,來控制一個矩形的長度。在這裡,數據與表現的關係是:

長度數值保存在變量中

變量顯示於某個 input 中

變量的值即是矩形的長度

input 中的值變化時,變量也要變化

input 中的值變化時,矩形的長度也要變化

當然,要實現目的在這裡可能就不止一種方案了。按照以前的做法,很自然地會想法,綁定input 的 change事件,然後去做一些事就好了。但是,我們前面提到過 ng-model 這個東西,利用它就可以在不手工處理 change 的條件下完成數據的展現需求,在此基礎之上,我們還需要做的一點,就是把變化后的數據應用到矩形的長度之上。

最開始,我們面對的應該是這樣一個東西:

<p ng-controller="TestCtrl">

  <p style="width: 100px; height: 10px; background-color:red"></p>

  <input type="text" name="width" ng-model="width" />

</p>

<script type="text/javascript">

angular.module('app', [],angular.noop)

.controller('TestCtrl', function($scope){

    $scope.width = 100;

});

angular.bootstrap(document.documentElement,['app']);

</script>

我們從響應數據變化,但又不使用 change事件的角度來看,可以這樣處理寬度變化:

angular.module('app',[], angular.noop)

.controller('TestCtrl',function($scope){

  $scope.width = 100;

  $scope.$watch('width',

    function(to, From){

      $element.children(':First').width(to);

    }

  );

});

使用 $watch() 來綁定數據變化。

當然,這種樣式的問題,有更直接有效的手段, ng 的數據綁定總是讓人驚異:

<p ng-controller="TestCtrl">

  <p style="width: 10px; height: 10px; background-color:red" ng-style="style">

  </p>

  <input type="text" name="width" ng-model="style.width" />

</p>

<script type="text/javascript">

angular.module('app', [],angular.noop)

.controller('TestCtrl', function($scope){

    $scope.style = {width: 100 + 'px'};

});

angular.bootstrap(document.documentElement,['app']);

</script>

1、數據->模板

數據到表現的綁定,主要是使用模板標記直接完成的:

<p>{{ w }} x{{ h }}</p>

使用 {{ }}這個標記,就可以直接引用,並綁定一個作用域內的變量。在實現上, ng 自動創建了一個 watcher。效果就是,不管因為什麼,如果作用域的變量發生了改變,我們隨時可以讓相應的頁面表現也隨之改變。我們可以看一個更純粹的例子:

<p id="test" ng-controller="TestCtrl">{{ a }}</p>

<script type="text/javascript">

angular.module('app', [],angular.noop)

.controller('TestCtrl', function($scope){

    $scope.a = '123';

});

angular.bootstrap(document.documentElement,['app']);

</script>

上面的例子在頁面載入之後,我們可以在頁面上看到 123。這時,我們可以打開一個終端控制器,輸入:

$('#test').scope().a= '12345';

$('#test').scope().$digest();

上面的代碼執行之後,就可以看到頁面變化了。

對於使用 ng進行的事件綁定,在處理函數中就不需要去關心 $digest() 的調用了。因為 ng 會自己處理。源碼中,對於 ng 的事件綁定,真正的處理函數不是指定名字的函數,而是經過 $apply() 包裝過的一個函數。這個 $apply()做的一件事,就是調用根作用域 $rootScope 的 $digest() ,這樣整個世界就清凈了:

<p id="test" ng-controller="TestCtrl"ng-click="click()">{{ a }}</p>

<script type="text/javascript">

angular.module('app', [],angular.noop)

.controller('TestCtrl', function($scope){

    $scope.a = '123';

    $scope.click = function(){

      $scope.a = '456';

    }

});

angular.bootstrap(document.documentElement,['app']);

</script>

那個 click 函數的定義,綁定時變成了類似於:

function(){

  $scope.$apply(

    function(){

      $scope.click();

    }

  )

}

這裡的 $scope.$apply()中做的一件事:

$rootScope.$digest();

2. 模板->數據

模板到數據的綁定,主要是通過 ng-model 來完成的:

<input type="text" id="test" ng-controller="TestCtrl"ng-model="a"/>

<script type="text/javascript">

angular.module('app', [],angular.noop)

.controller('TestCtrl', function($scope){

    $scope.a = '123';

});

angular.bootstrap(document.documentElement,['app']);

</script>

這時修改 input 中的值,然後再在控制終端中使用:

$('#test').scope().a

查看,發現變量 a 的值已經更改了。

實際上, ng-model是把兩個方向的綁定都做了。它不光顯示出變量的值,也把顯示上的數值變化反映給了變量。這個在實現上就簡單多了,只是綁定 change事件,然後做一些賦值操作即可。不過 ng 里,還要區分對待不同的控件。

3. 數據->模板->數據->模板

現在要考慮的是一種在現實中很普遍的一個需求。比如就是我們可以輸入數值,來控制一個矩形的長度。在這裡,數據與表現的關係是:

長度數值保存在變量中

變量顯示於某個 input 中

變量的值即是矩形的長度

input 中的值變化時,變量也要變化

input 中的值變化時,矩形的長度也要變化

當然,要實現目的在這裡可能就不止一種方案了。按照以前的做法,很自然地會想法,綁定input 的 change事件,然後去做一些事就好了。但是,我們前面提到過 ng-model 這個東西,利用它就可以在不手工處理 change 的條件下完成數據的展現需求,在此基礎之上,我們還需要做的一點,就是把變化后的數據應用到矩形的長度之上。

最開始,我們面對的應該是這樣一個東西:

<p ng-controller="TestCtrl">

  <p style="width: 100px; height: 10px; background-color:red"></p>

  <input type="text" name="width" ng-model="width" />

</p>

<script type="text/javascript">

angular.module('app', [],angular.noop)

.controller('TestCtrl', function($scope){

    $scope.width = 100;

});

angular.bootstrap(document.documentElement,['app']);

</script>

我們從響應數據變化,但又不使用 change事件的角度來看,可以這樣處理寬度變化:

angular.module('app',[], angular.noop)

.controller('TestCtrl',function($scope){

  $scope.width = 100;

  $scope.$watch('width',

    function(to, from){

      $element.children(':first').width(to);

    }

  );

});

使用 $watch() 來綁定數據變化。

當然,這種樣式的問題,有更直接有效的手段, ng 的數據綁定總是讓人驚異:

<p ng-controller="TestCtrl">

  <p style="width: 10px; height: 10px; background-color:red" ng-style="style">

  </p>

  <input type="text" name="width" ng-model="style.width" />

</p>

<script type="text/javascript">

angular.module('app', [],angular.noop)

.controller('TestCtrl', function($scope){

    $scope.style = {width: 100 + 'px'};

});

angular.bootstrap(document.documentElement,['app']);

</script>

覺得可用,就經常來吧!Javascript技巧 腳本寶典 歡迎評論哦! js技巧,巧奪天工,精雕玉琢。小寶典獻醜了!

脚本宝典总结

以上是脚本宝典为你收集整理的js實例教程-AngularJS數據綁定代碼教程全部内容,希望文章能够帮你解决js實例教程-AngularJS數據綁定代碼教程所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。