如何在不更改视图的情况下将子控制器范围与父控制器范围隔离？

Question

单击父按钮也会更改子按钮，但不会更改子按钮。我需要通过任何 hack 或其他方式更改此行为隔离范围。

子控制器不继承父控制器，必须有自己的作用域！

angular
  .module('app', [])
  .controller('ParentCtrl', function() {})
  .controller('ChildCtrl', function() {})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app=app>
  <div ng-controller=ParentCtrl>
    <button ng-click="text='clicked'">
      {{text || 'parent'}}
    </button>
    <div ng-controller=ChildCtrl>
      <button ng-click="text='clicked'">
        {{text || 'child'}}
      </button>
    </div>
  </div>
</div>

https://jsfiddle.net/nizami/oLwbktz9/

Answer 1

只需更改您的子控制器范围变量。控制器始终从父级继承范围 controllers.In 您可以选择创建独立范围的指令。

<div ng-controller=ParentCtrl>
  <button ng-click="text='clicked'">
    {{text || 'parent'}}
  </button>
  <div ng-controller=ChildCtrl>
    <button ng-click="text2='clicked'">
      {{text2 || 'child'}}
    </button>
  </div>
</div>

Answer 2

angular
  .module('app', [])
  .controller('ParentCtrl', ['$scope', function($scope) {
  $scope.text = null;
  }])
  .controller('ChildCtrl', ['$scope', function($scope) {
  $scope.text = null;
  }])

Answer 3

检查更新的plunker..我希望你能得到你的答案

https://jsfiddle.net/oLwbktz9/6/

<div ng-controller=ParentCtrl>
  <button ng-click="text='clicked'">
    {{text || 'parent'}}
  </button>
    </div>
  <div ng-controller=ChildCtrl>
    <button ng-click="text='clicked'">
      {{text || 'child'}}
    </button>
</div>

如何在不更改视图的情况下将子控制器范围与父控制器范围隔离？

How to isolate child controller scope from parent controller scope without changing the view?

angularjs

angularjs-scope

angularjs-controller