javascript - 从第三级范围 Angular js访问第二级范围

Question

如上所示，我试图从 Angular Controller 的 3 级范围访问第二个 2 级范围但是，父级为 null，并且它能够访问 Level1 范围，尽管我不想要

也需要从 level3 访问 level2 范围

as you can see in below pic the level 2 scope from parent comes as null

Answer 1

angular.element(...).scope() 将获取目标元素所属的范围(不是当前范围)。

在下面的示例中，我添加了四个输入(外部 Controller 、levelOne、levelTwo、levelThree)以使其清晰(打开控制台进行确认)。

angular.module("app", [])
  .controller("levelOne", function($scope) {
    $scope.data = 'levelOne';
  })
  .controller("levelTwo", function($scope) {
    $scope.childData = 'levelTwo';
  })
  .controller("levelThree", function($scope) {
    $scope.grandChildData = 'levelThree';
    console.log($scope.$parent);
    var scope = angular.element(document.getElementById("input")).scope();
    var parentScope = angular.element(document.getElementById("levelOne")).scope();
    var childScope = angular.element(document.getElementById("levelTwo")).scope();
    var grandChildScope = angular.element(document.getElementById("levelThree")).scope();
    console.log('scope', scope);
    console.log('parentScope', parentScope);
    console.log('childScope', childScope);
    console.log('grandChildScope', grandChildScope);
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app">
  <input id="input" type="text" value="not in controller">
  <hr>
  <div ng-controller="levelOne">
    <input id="levelOne" type="text" ng-model="data">
    <hr>
    <div ng-controller="levelTwo">
      <input id="levelTwo" type="text" ng-model="childData">
      <hr>
      <div ng-controller="levelThree">
        <input id="levelThree" type="text" ng-model="grandChildData">
      </div>
    </div>
  </div>
</div>

根据您提供的屏幕截图，也许您适合第二种情况(元素属于level1的模板)，那么解决方案应该是将元素移动到level3 strong> 的模板。