ビューを変更せずに、親コントローラスコープから子コントローラスコープを分離する方法はありますか？

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 uはあなたが正確に何をしたいですか？ウル答え

​​

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