By

文章目录

今天调代码的时候遇见了一个我看起来很诡异的情况 ，就是在ng-controller 中 用ng-show 来显隐两个模块。但是无论怎样做，这个ng-show 也不能正常切换，真是奇怪，这个ng-show 和ng-controller 我可是用过很多次了啊。。。 多次事实证明，表现出来的错误并不一定是错误的根源，尤其是这些写过多次理应就是这样的错误，这些往往都是表象。

遇见的bug 代码简化如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div ng-controller="demoCtrl">
  <button type="button" name="button" ng-click="change()">change</button>
</div>
<div ng-controller="demoCtrl">
      <div class="one" ng-show="pattern">
          one
      </div>
      <div class="two" ng-show="!pattern">
          two
      </div>
</div>
  <script type="text/javascript">
      angular.module('myApp', [])
          .controller('demoCtrl', function($scope) {
              $scope.pattern = true;
              $scope.change = function() {
                  $scope.pattern = !$scope.pattern;
              }
          })
  </script>

这段代码我在写时就认为效果就应该是点击change 时两个div相互切换，然而并没有，纳尼？
我想这样功能的代码如果把button放在第二个 ng-controller 中 效果就可以了，这也是我们常用的方式。
代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div ng-controller="demoCtrl">
  <button type="button" name="button" ng-click="change()">change1</button>
</div>
<div ng-controller="demoCtrl">
      <div class="one" ng-show="pattern">
          one
      </div>
      <div class="two" ng-show="!pattern">
          two
      </div>
  <button type="button" name="button" ng-click="change()">change2</button>
</div>
  <script type="text/javascript">
      angular.module('myApp', [])
          .controller('demoCtrl', function($scope) {
              $scope.pattern = true;
              $scope.change = function() {
                  $scope.pattern = !$scope.pattern;
              }
          })
  </script>

这样的代码change2 是有理想的效果的，但是change1 就没有理想的效果的，错误我们就看出来了就出在两个ng-controller中。即便这两个controller 是同一个。

这是因为 ng-controller 和服务是不一样的，服务是单例的只会实例化一次，而控制器会根据需要实例化，在这里也就是会实例化两次，虽然是同一套代码，但是在第一次ng-controller 中调用更改的pattern 是不会影响到第二个 pattern值的。这种错误若是调试，表现的就是pattern 值确实更改了，但是ng-show就是不变（ng-show 说我好无辜啊。。。。）

文章目录