如何在ng-if中取得ng-model的值

來北京工作快一個月了吧,項目是我感興趣的angular框架的,遇到和解決了一些坑。

今個遇到的都是定義域的問題,首先是directive複用,scope衝突,需要配置scope參數,然後就是ng-if會開闢一塊定義域(這也是ng-if與ng-show的一大區別),話不多說,上代碼一看便知。

<html ng-app='App'>
<head>
    <title>如何在ng-if中取ng-model的值</title>
    <meta charset="utf-8" />
    <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script>
</head>
<body ng-controller='Ctrl'>
  <h4>如何在ng-if中取ng-model的值</h4>
  <button ng-click='log()'>在控制檯打印</button>
  <div ng-if='show1'>
     1、<input ng-model='text1' />
  </div>
  <div ng-if='show2'>
     2、<input ng-model='$parent.text2' />
  </div>
<script>
    var App=angular.module('App',[])
    .controller('Ctrl',function($scope){
      $scope.show1=$scope.show2=true;
      $scope.log=function(){
        console.log('text1',$scope.text1);
        console.log('text2',$scope.text2);
      }
    })
</script>
</body>
</html>

向上例代碼1中的scope.text1ngifcontrollerfactoryemitbroadcaststackoverflow parent指令。ng這是有多少意想不到的指令要學。

下邊給你codepen可以在線查看效果,記得打開console控制檯哦

歡迎交流

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章