如何在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控制台哦

欢迎交流

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