将值/参数发送到 uibModal angular

Question

我有一个包含受抚养人列表的employee.html 页面，每行(li) 都有一个带有指令ng-click="editDependent({{dependent.id}})" 的内部按钮。该按钮尝试调用模态框。

employee.html 从 index.html 加载到 ui_view div 中

我看到带有 chrome 的视图源中的每个按钮都正确绑定了 ng-click="editDepedent(1)" 等等。

但同时我有一个错误

angular.min.js:118 错误：[$parse:syntax] http://errors.angularjs.org/1.5.8/$parse/syntax?p0=%7B&p1=invalid%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();
    }
});

更新

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>

更新

我将控制器更改为在 $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，对我来说会更好理解