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> 

我無法傳遞範圍,該對話框並顯示值的選定員工。

回答

0

在EditEmployeeController控制器上創建模態,因爲它具有可用的$範圍。

+0

嗨Asim,從上面發佈的代碼,僱員顯示在employee.jsp頁面...我已經提供了他們和編輯鏈接。與他們關聯的控制器是'AdminController'。所以我給了這個關於國家導航的鏈接。如果我從那裏打開一個模式,它將永遠不會成爲'EditEmployeeController'的一部分。不是嗎? –

+0

其實我將彈出式視爲單獨的狀態。早些時候,我從AdminController中彈出了它自己的彈出窗口,它工作正常。但後來我意識到,打開彈出窗口時,它將我的網址更改爲'/#'主頁。 –

+0

我有點困惑,是你的問題,你必須在兩個控制器上定義相同的功能,因爲你想在兩個地方使用模態? – jawache