Question

我是angularjs v1的新手。我想知道为什么我不能将单个变量范围分配到md-checkbox中。像

<md-checkbox ng-click="checkAllBox();" ng-model="chkValue" aria-label="Checkbox" style="float:left;margin-left:-4px;" class="md-primary"></md-checkbox>

;控制器

$scope.chkValue = false;

不起作用（$ scope.chkValue没有正确关联UI复选框）。但是下面的确如此。我可以知道为什么吗？

<md-checkbox ng-click="checkAllBox();" ng-model="data.cb1" aria-label="Checkbox" style="float:left;margin-left:-4px;" class="md-primary"></md-checkbox>

;控制器

$scope.data.cb1 = false;

Answer 1

因为您正在从子范围更改变量，所以父范围变量永远不会更改。范围包含继承。您可以从docs

获取信息

修改

更具特色。控制器，某些指令（＆＃39; ng-if＆＃39;＆＃39; ng-include＆＃39;，vs.）隔离范围会创建自己的范围。

如果你想要一个变量，你需要将它与变量所有者一起使用。

下面有一个实时答案。您可以看到控制器已创建自己的范围，而父范围无法检测更改，因为它现在具有不同的所有者（this）。

＆＃13;

var app = angular.module("app",[]);
app.controller("ctrl", function($scope){
  $scope.checkData = false;
})

＆＃13;

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body  ng-app="app"  >
    parent1:<input ng-model="checkData" type="checkbox"/>
    
      <div class="child">
        <div class="child">
          <div class="innerChild">
            inner1:<input ng-model="checkData" type="checkbox"/>
          </div>
            <div class="innerChild">
              inner2:<input ng-model="checkData" type="checkbox"/>
          </div>
        </div>
      </div>
    Controller Scope -><br>
parent2:<input ng-model="checkData" type="checkbox"/>
    <div ng-controller="ctrl" >
      <div class="child">
        <div class="child">
          <div class="innerChild">
            inner1:<input ng-model="checkData" type="checkbox"/>
          </div>
            <div class="innerChild">
              inner2:<input ng-model="checkData" type="checkbox"/>
          </div>
        </div>
      </div>
      <div class="child">
        <div class="innerChild">
          inner3:<input ng-model="checkData" type="checkbox"/>
        </div>
      </div>
    </div>
  </body>
</html>

＆＃13;

AngularJs复选框发出单变量

1 个答案: