發送值/參數到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