0
我使用angular js來開發我的應用程序。我正在使用角度路由器進行模式對話的路由和角度綁定。Angular JS - 將範圍傳遞給有狀態模式
我有兩種狀態:
/admin/employees --> get all employees
/admin/employees/update:employeeId -->for edit a particular employee.
這是怎麼我的依賴配置:
var app = angular.module('pipeline', [
'ngResource',
'infinite-scroll',
'angularSpinner',
'jcs-autoValidate',
'angular-ladda',
'ui.router',
'mgcrea.ngStrap',
'toaster',
'ngAnimate'
]);
國家提供商配置
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('pipeline', {
url: '/pipeline',
views: {
'main':{
templateUrl: 'views/templates/pipeline.jsp',
controller: 'PipelineController'
},
'buttonbar':{
templateUrl: 'views/templates/button-bar.jsp',
controller: 'PipelineController'
}
}
})
.state('employees',{
url: '/admin/employees',
views: {
'main':{
templateUrl: 'views/templates/employee.jsp',
controller: 'AdminController'
},
'search':{
templateUrl: 'views/templates/search-form.jsp',
controller: 'AdminController'
}
}
})
.state('employees.add',{
url: '/add',
parent: 'employees',
onEnter: ['$stateParams', '$state', '$modal', '$resource', '$scope', function($stateParams, $state, $modal, $resource, $scope){
$modal({
template: "views/templates/modal.edit.tpl.jsp",
scope: $scope,
show: true
});
}]
})
.state('employees.update',{
url: '/update/:username',
parent: 'employees',
controller: 'EditEmployeeController',
onEnter: ['$stateParams', '$state', '$modal', '$resource', function($stateParams, $state, $modal, $resource){
$modal({
template: "views/templates/modal.edit.tpl.jsp",
show: true
});
}]
});
$urlRouterProvider.otherwise('/');
});
控制器對話框
app.controller('EditEmployeeController', function($scope, $state, $stateParams, AdminService, $modal){
$scope.adminService = AdminService;
$scope.adminService.getSelectedEmployee($stateParams.username).then(function(){
console.log("I am loaded.");
});
$scope.hideModal = function(){
$modal.hide();
$state.go("employees");
};
});
服務功能得到員工
'getSelectedEmployee': function(username){
var d = $q.defer();
var entry = Employee.get({id:username, expand: true}, function(){
self.selectedEmployee = new Employee(entry.employee);
d.resolve();
});
return d.promise;
}
從模板對話框
<div class="form-group">
<label class="col-sm-2 control-label">ID</label>
<div class="col-sm-10">
<label class="form-control">{{ adminService.selectedEmployee.username }}</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<label class="form-control"> {{ adminService.selectedEmployee.fullname }} </label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<select class="form-control" ng-model="adminService.selectedEmployee.role.name">
<option value="ROLE_ADMIN">ADMIN</option>
<option value="ROLE_FASTEST_USER">FASTEST USER</option>
<option value="ROLE_EXTERNAL_USER">EXTERNAL USER</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Active</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" id="employeeActive" ng-model="adminService.selectedEmployee.active">
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-sm-offset-2">
<button class="btn btn-primary" type="submit" >Save</button >
<button class="btn btn-default" type="reset" ng-click="hideModal()" >Cancel</button >
</div>
</div>
我無法傳遞範圍,該對話框並顯示值的選定員工。
嗨Asim,從上面發佈的代碼,僱員顯示在employee.jsp頁面...我已經提供了他們和編輯鏈接。與他們關聯的控制器是'AdminController'。所以我給了這個關於國家導航的鏈接。如果我從那裏打開一個模式,它將永遠不會成爲'EditEmployeeController'的一部分。不是嗎? –
其實我將彈出式視爲單獨的狀態。早些時候,我從AdminController中彈出了它自己的彈出窗口,它工作正常。但後來我意識到,打開彈出窗口時,它將我的網址更改爲'/#'主頁。 –
我有點困惑,是你的問題,你必須在兩個控制器上定義相同的功能,因爲你想在兩個地方使用模態? – jawache