サブui-viewコンポーネントから親コントローラにアクセスする

Question

私はこの回答を見つけることができませんが、私はrequireを使ってみましたが、運がありません。コンポーネント定義から 'settings'の親を見つけることができません。

すべての '子'ルートがすべての '設定'メソッドにアクセスできるようにしたいので、複数の状態にわたってメソッドを再利用できます。

「設定」コンポーネントコントローラのメソッドにネストされたUIビューコンポーネントからアクセスするにはどうすればよいですか？

index.htmlを

<ui-view></ui-view>

app.js

$stateProvider.register('settings', { 
    abstract : true, 
    component: 'settings', 
    url : '/settings' 
}); 
$stateProvider.register('settings.user', { 
    component: 'settingsUser', 
    url : '/:user', 
}); 

angular.module('app', []) 
    .component('settings', { 
     template : `<ui-view></ui-view>`, 
     controller : class Settings { 
      constructor($state) { 
       this.test =() => console.log('test'); 
       $state.go('settings.user'); 
      } 

     } 
    }) 
    .component('settingsUser', { 
     controller : class SettingsUser { 
      constructor() { 
       // want to access parent controller methods 
      } 
     } 
    }); 

Answer 1

代わり$scopeあなたが望むもののためにアクセス$rootScopeを使用してアクセスすることができます。 THS例test1で は$rootscopeですがtest2は$scopeあり、例を参照controller Ctrl2に我々はtest1を変更し、それがCTRL1に変更されます：答えは実際には非常に簡単だった

var app = angular.module('myApp', []); 
 
app.controller('Ctrl1', function($scope,$rootScope) { 
 
    $rootScope.test1 = "topController"; 
 
    $scope.test2 = "topController2"; 
 
}) 
 
.controller('Ctrl2', function($scope,$rootScope) { 
 
    $rootScope.test1 = "mainController"; 
 
    $scope.test2 = "mainController2"; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" > 
 
    <div ng-controller="Ctrl1"> 
 
    {{test1}} {{test2}} 
 
    </div> 
 
    <div ng-controller="Ctrl2"> 
 
    {{test1}} {{test2}} 
 
    </div> 
 
</div>

Answer 2

を、私はちょうどルートで動作することを期待していない、あなたは単にrequire blockを介して親コンポーネントを要求することができます子ビューで。これは、子ビューのコントローラの$ onInitライフサイクルフェーズで、必要なコンポーネントのコントローラを公開します。

$stateProvider.register('settings', { 
    abstract : true, 
    component: 'settings', 
    url : '/settings' 
}); 
$stateProvider.register('settings.user', { 
    component: 'settingsUser', 
    url : '/:user', 
}); 

angular.module('app', []) 
    .component('settings', { 
     template : `<ui-view></ui-view>`, 
     controller : class Settings { 
      constructor($state) { 
       this.test =() => console.log('test'); 
       $state.go('settings.user'); 
      } 

     } 
    }) 
    .component('settingsUser', { 
     require : { 
      $settings : '^settings' 
     }, 
     controller : class SettingsUser { 
      constructor() { 
       // want to access parent controller methods 
      } 
      $onInit() { 
       this.$settings.test() 
      } 
     } 
    });