从angularui中的嵌套状态访问父状态控制器
Access parent state controller from nested state in angularui
我在我的项目中定义了嵌套状态:
$stateProvider
.state("MultiStepForm", {
url: "/Sensor/MultiStepForm",
templateUrl: "/app/MultiStepForm/MultiStepForm.html",
controller: "MultiStepFormController",
controllerAs: "MultiStepLogic"
})
.state('MultiStepForm.step1', {
url: '/step1',
templateUrl: '/app/MultiStepForm/NestedViews/FormStep1.html',
controller: "MultiStepLogicStep1Controller",
controllerAs: "Step1"
})
.state('MultiStepForm.step2', {
url: '/step2',
templateUrl: '/app/MultiStepForm/NestedViews/FormStep2.html',
controller: "MultiStepLogicStep2Controller",
controllerAs: "Step2"
})
.state('MultiStepForm.step3', {
url: '/step3',
templateUrl: '/app/MultiStepForm/NestedViews/FormStep3.html',
controller: "MultiStepLogicStep3Controller",
controllerAs: "Step3"
});
在 MultiStepForm 状态下我定义了这个 属性:
var self = this;
this.data = "someObject";
在 MultiStepForm.step3 状态控制器(Step3)中,我想访问在父状态控制器中定义的 属性:
this.data = "some data from MultiStepForm.step3 state"
我的问题是如何从嵌套状态控制器访问父 属性?
在将数据注入控制器之前,您需要 'resolve' 该数据。如果它在 parent 得到解决,它将对 children 可用。
像这样:
$stateProvider
.state("MultiStepForm", {
url: "/Sensor/MultiStepForm",
templateUrl: "/app/MultiStepForm/MultiStepForm.html",
controller: "MultiStepFormController",
controllerAs: "MultiStepLogic",
resolve: {
your_custom_data: ['$stateParams', 'another_service',
function($stateParams, another_service) {
//you can use $stateParams or other services here as needed to get the data you want
return the_value_of_your_custom_data;
}],
})
然后在你的控制器中:
angular
.module('your_app')
.controller('MultiStepLogicStep3Controller', MultiStepLogicStep3Controller);
function MultiStepLogicStep3Controller($state, your_custom_data) {
//access your $state or custom data here
this.custom_data = your_custom_data;
}
我在我的项目中定义了嵌套状态:
$stateProvider
.state("MultiStepForm", {
url: "/Sensor/MultiStepForm",
templateUrl: "/app/MultiStepForm/MultiStepForm.html",
controller: "MultiStepFormController",
controllerAs: "MultiStepLogic"
})
.state('MultiStepForm.step1', {
url: '/step1',
templateUrl: '/app/MultiStepForm/NestedViews/FormStep1.html',
controller: "MultiStepLogicStep1Controller",
controllerAs: "Step1"
})
.state('MultiStepForm.step2', {
url: '/step2',
templateUrl: '/app/MultiStepForm/NestedViews/FormStep2.html',
controller: "MultiStepLogicStep2Controller",
controllerAs: "Step2"
})
.state('MultiStepForm.step3', {
url: '/step3',
templateUrl: '/app/MultiStepForm/NestedViews/FormStep3.html',
controller: "MultiStepLogicStep3Controller",
controllerAs: "Step3"
});
在 MultiStepForm 状态下我定义了这个 属性:
var self = this;
this.data = "someObject";
在 MultiStepForm.step3 状态控制器(Step3)中,我想访问在父状态控制器中定义的 属性:
this.data = "some data from MultiStepForm.step3 state"
我的问题是如何从嵌套状态控制器访问父 属性?
在将数据注入控制器之前,您需要 'resolve' 该数据。如果它在 parent 得到解决,它将对 children 可用。
像这样:
$stateProvider
.state("MultiStepForm", {
url: "/Sensor/MultiStepForm",
templateUrl: "/app/MultiStepForm/MultiStepForm.html",
controller: "MultiStepFormController",
controllerAs: "MultiStepLogic",
resolve: {
your_custom_data: ['$stateParams', 'another_service',
function($stateParams, another_service) {
//you can use $stateParams or other services here as needed to get the data you want
return the_value_of_your_custom_data;
}],
})
然后在你的控制器中:
angular
.module('your_app')
.controller('MultiStepLogicStep3Controller', MultiStepLogicStep3Controller);
function MultiStepLogicStep3Controller($state, your_custom_data) {
//access your $state or custom data here
this.custom_data = your_custom_data;
}