发送值/参数到uibModal角

Question

我有一个页面employee.html与依赖列表和每行（li）一个内部按钮与指令ng-click =“editDependent（{{dependent.id}}） ”。该按钮尝试调用模态框。

的employee.html以ui_view DIV从一个index.html

我看到，在用铬视图源的每个按钮都正确绑定纳克单击=“editDepedent（1）”等加载。

但在同一时间，我有一个错误

angular.min.js：118错误：？[$解析：语法] http://errors.angularjs.org/1.5.8/ $解析/语法P0 =％7B & P1 =无效％20key & P2 = 11 & P3 = editDependent（％7B％7Bdependent.id％7D％7D）& P4 =％7Bdependent.id％7D％7D）

我想我的依赖ID传递给我的模式和以前的范围也包含有关员工的信息。那么我怎样才能实现这个参数传递呢？

这是我的主控制器

app.controller('EmployeeController', function ($scope, $stateParams, $uibModal, EmployeeService) { 
     if($stateParams.id){ 
EmployeeService.getEmployee($stateParams.id).then(function(employee){ 
       $scope.employee = employee; 
       EmployeeService.setCurrentEmployee(employee); 
      }); 
     } 

     $scope.editDependent = function(id){ 
      if(id){ 
       $scope.dependentid = id; 
      } 
      var uibModalInstance = $uibModal.open({ 
       templateUrl : 'modal_dependent.html', 
       controller : 'DependentController', 
       scope: $scope 
      }); 
      return uibModalInstance; 
     } 
    }); 

这是我的依赖控制器搭上值

app.controller('DependentController', function($scope, $uibModal, $uibModalInstance, $stateParams, EmployeeService){ 
    //Following line does not work because it gets the ID of employee which is passed by querystring 
    //var dependentID = $stateParams.id; 

    if($scope.dependentid){ 
     var currentEmployee = EmployeeService.getCurrentEmployee(); 
     //find the current dependent 
     for(var i = 0; i < currentEmployee.dependents.length; i++){ 
      //***************************************************** 
      //Hardcoding 1 to test the dependent number 1 but it should be the dependent id parameter 
      if(currentEmployee.dependents[i].id == 1){ 
       $scope.dependent = currentEmployee.dependents[i]; 
       break; 
      } 
     } 
    }else{ 
     $scope.dependent = { id : 0 }; 
    } 
    $scope.editableDependent = angular.copy($scope.dependent); 
    //Submit button in modal 
    $scope.submitDependent = function(){ 
     DependentService.saveDependent($scope.editableDependent); 
     $scope.dependent = angular.copy($scope.editableDependent); 
     $uibModalInstance.close(); 
    } 
}); 

UPDATE

employee.html

<form name="employee_form"> 
    <div> 
     <h1> {{employee.name}} </h1> 
     <h3>Dependents</h3> 
     <button class="btn bgcolor-rb-main" x-ng-click="editDependent(0)"> 
      Add new 
     </button> 
     <ul class="list-inline"> 
      <li x-ng-repeat="dependent in employee.dependents"> 
       <button x-ng-click="editDependent({{dependent.id}})"> 
        Edit 
       </button><br> 
       <div>{{dependent.name}}</div> 
      </li> 
     </ul> 
    </div> 
</form> 

这是我modal_dependent.html

<div class="modal-header"> 
    <h4>Dependent</h4> 
</div> 
<div class="modal-body"> 
    <div class="form-group"> 
     <input type="text" id="txtName" x-ng-model="editableDependent.name" /> 
    </div> 
</div> 
<div class="modal-footer"> 
    <button type="button" class="btn btn-default" x-ng-click="discardChanges()">Discard</button> 
    <button type="submit" class="btn btn-primary" x-ng-click="submitDependent()">Save</button> 
</div> 

UPDATE

我改变了我的控制器$ scope.dependent

app.controller('DependentController', function($scope, $uibModal, $uibModalInstance, $stateParams, EmployeeService){ 
    //Following line does not work because it gets the ID of employee which is passed by querystring 
    //var dependentID = $stateParams.id; 

    $scope.dependent = { id : 0 }; 

    if($scope.dependentid){ 
     var currentEmployee = EmployeeService.getCurrentEmployee(); 
     //find the current dependent 
     for(var i = 0; i < currentEmployee.dependents.length; i++){ 
      //***************************************************** 
      //Hardcoding 1 to test the dependent number 1 but it should be the dependent id parameter 
      if(currentEmployee.dependents[i].id == 1){ 
       $scope.dependent = currentEmployee.dependents[i]; 
       break; 
      } 
     } 
    } 
    $scope.editableDependent = angular.copy($scope.dependent); 
    //Submit button in modal 
    $scope.submitDependent = function(){ 
     DependentService.saveDependent($scope.editableDependent); 
     $scope.dependent = angular.copy($scope.editableDependent); 
     $uibModalInstance.close(); 
    } 
}); 

解决之前初始化

我的键来改变从这个

<button x-ng-click="editDependent({{dependent.id}})">Edit</button> 

对此

<button x-ng-click="editDependent(dependent.id)">Edit</button> 

Answer 1

我觉得这是分析错误，你必须使用它， 之前定义

$scope.dependentid = {}; 

或以其他方式，你可以使用它作为一个模型（如果您像这样在前端提交表格）

<input type="hidden" ng-model="dependentid" /> 

如果您编辑代码并添加一些前端，将更好地理解我的代码html