Как изолировать область дочернего контроллера от области родительского контроллера без изменения вида?

Question

Нажмите на родительскую кнопку, чтобы изменить также дочернюю, но дочернюю кнопку нет. Мне нужно изменить это поведение, изолируя области с любыми хаками или другим способом.

Контроллер ребенка не наследуется от родительского контроллера и должен иметь свою собственную область действия!

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

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

Answer 2

Просто измените дочерние переменные области видимости контроллера. Контроллеры всегда наследуют область действия от родительских контроллеров. В директивах вы можете создать изолированную область.

<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 3

Проверить обновленные plunkr..I надеюсь, и будет получить ур ответ

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>