Question

我正在使用角度j来开发我的应用程序。我正在使用角度路由器进行路由和角度绑定以进行模态对话。

我有两种状态：

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

我无法将范围传递到此对话框并显示所选员工的值。

Answer 1

在EditEmployeeController控制器上创建模态，因为它具有$ scope可用。

Angular JS - 将范围传递给有状态模态

1 个答案: