快捷導(dǎo)航

詳解Angular的雙向數(shù)據(jù)綁定(MV-VM)

更新時(shí)間：2016年12月26日 15:04:36 作者：小謝53

本文主要對(duì)Angular的雙向數(shù)據(jù)綁定(MV-VM)進(jìn)行實(shí)例分析，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧

angular的核心MVVM，下面來(lái)看看MV(數(shù)據(jù)到視圖)。

<div ng-controller="Aaa">
  <p>{{name}}</p>
</div>
<script type="text/javascript">
  function Aaa($scope){
 　   $scope.name = 'hello AngularJs';
 　　 setTimeout(function(){
　　　　　　$scope.name = 'Hi';
 　　  },2000); 
  };
</script>

執(zhí)行上面代碼，我們使用setTimeout延遲兩秒去更新數(shù)據(jù)(M)，我們的視圖(V)并沒(méi)有發(fā)生改變。

其實(shí)數(shù)據(jù)確實(shí)發(fā)生改變了，但是我們的視圖(V)并沒(méi)有及時(shí)刷新，原因是原生的setTimeout不具備刷新的功能。

angular為我們提供了setTimeout的服務(wù)，$timeout，需要在Aaa中引入該服務(wù) ！

<div ng-controller="Aaa">
  <p>{{name}}</p>
</div>
<script type="text/javascript">
  function Aaa($scope,$timeout){
    $scope.name = 'hello AngularJs';
　　　　$timeout(function(){
   　　  $scope.name = 'Hi';
 　　　},2000);
  };
<script>

這樣就可以刷新視圖了，M(數(shù)據(jù))到V(視圖)的過(guò)程。

如果我也想讓setTimeout也具有刷新視圖的功能怎麼辦 ? 可以借助$apply方法！

<div ng-controller="Aaa">
  <p>{{name}}</p>
</div>
<script type="text/javascript">
  function Aaa($scope){
    $scope.name = 'hello AngularJs';
    setTimeout(function(){
      $scope.$apply(function(){
        $scope.name = 'Hi';
      });
    },2000);
  }
<script>

也能實(shí)現(xiàn)刷新視圖！

在舉個(gè)例子：

<div id="Aaa" ng-controller="Aaa" ng-click="name='Hi'">
  <p>{{name}}</p>
</div>
<script type="text/javascript">
  function Aaa($scope){
    $scope.name = 'hello AngularJs';
  };
</script>

我們?cè)贗D為Aaa的元素綁定了一個(gè)點(diǎn)擊事件，當(dāng)發(fā)生點(diǎn)擊的時(shí)候?qū)ame值改為Hi，

當(dāng)然，也可以傳遞一個(gè)函數(shù)，來(lái)實(shí)現(xiàn)更多的功能。

<div id="Aaa" ng-controller="Aaa" ng-click="show()">
  <p>{{name}}</p>
</div>
<script type="text/javascript">
  function Aaa($scope){
    $scope.name = 'hello AngularJs';
    $scope.show = function(){
      $scope.name = 'Hi';
    };
  }
</script>

看到了click，相信你也知道如何使用鼠標(biāo)移入和移出的這些常用的事件了。

看最后一個(gè)例子，V(視圖)到M(數(shù)據(jù))的過(guò)程。

<div ng-controller="Aaa">
  <input type="text" ng-model="name"/>
  <p>{{name}}</p>
</div>
<script type="text/javascript">
  function Aaa($scope){
    $scope.name = 'hello AngularJs';
  };
</script>

我們?cè)趇nput標(biāo)簽上綁定了一個(gè)ng-model，這個(gè)就是綁定的數(shù)據(jù)，會(huì)默認(rèn)填充到input的value上，當(dāng)我們的input值發(fā)生改變的時(shí)候，對(duì)應(yīng)在$scope中的數(shù)據(jù)也會(huì)發(fā)生改變，從而影響到視圖中的p標(biāo)簽的值也會(huì)發(fā)生改變。