未定义的双向绑定对象以角度保存

Question

我在下面发布了我的代码。在一个模态中，我有一个editDependent作为模型div中的模型，该模式div位于页面employee.html中，该页面在内部div ui-view中路由。如何从modal对对象执行双向绑定并将其发送保存？我在下面解释一下。

我有一个索引作为主html，其中包含一个ui-view。我控制路由 像这样

app.config(function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider){
    $urlRouterProvider.otherwise('/');

    $stateProvider
    .state('home', {
        url: '/:id',
        params:{
            //test
            param1: 1
        },
        templateUrl: 'employee.html',
        controller: 'EmployeeController'
    })
});

这是我的employee.html

<form name="employee_form">
    <div>
        <h1> {{employee.name}} </h1>
        <h3>Dependents</h3>
        <button data-id="0" data-parentid={{employee.id}} class="btn bgcolor-rb-main open-employee" data-toggle="modal" data-target="#modalEmployee">
            Add dependent
        </button>
        <ul class="list-inline">
            <li x-ng-repeat="dependent in employee.dependents">
                <button data-id={{dependent.id}} data-parentid={{employee.id}} class="open-employee">Edit</button><br>
                <div>{{dependent.name}}</div>
            </li>
        </ul>
    </div>
    <!-- <button id="btn btn-primary btn-lg" x-ng-click="editEmployee()">New dependent</button> -->

    <div class="modal fade" id="modalDependent" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="vertical-alignment-helper">
            <div class="modal-dialog vertical-align-center">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4>Dependent</h4>
                    </div>
                    <div class="modal-body">
                            <div class="form-group">
                                <input type="text" id="txtName" x-ng-model="editDependent.name" />
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Discard</button>
                        <button type="submit" class="btn btn-primary" x-ng-click="submitDependent()">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</form>

这是我的EmployeeService和EmployeeController

app.service('EmployeeService', function($http, RestService){

    this.saveEmployee = function(employee){
        RestService.postEmployee(employee);
    } 

    this.getEmployee = function(id){
        return RestService.getEmployeeByID(id);
    }

    this.saveDependent = function(dependent){
        //HOW TO ARRIVE HERE? PROBLEM IS STILL BELOW
        console.log(dependent);
    }
});


app.controller('EmployeeController', function ($scope, $stateParams, $uibModal, EmployeeService) {

    if($stateParams.id){
        EmployeeService.getEmployee($stateParams.id).then(function(employee){
            $scope.employee = employee;
        }); 
    }

    //This comes from another page but it should be reused by employee.html
    $scope.saveEmployee = function(){
        EmployeeService.saveEmployee($scope.newEmployee);
        $scope.newEmployee = {};
    }

    //HERE STARTS THE PROBLEM!!!
    $scope.submitDependent = function(){
        if($scope.editDependent){
          //Call service to save dependent
           EmployeeService.saveDependent($scope.editDependent);
           console.log('Ok');
        }else{
           //HERE THE ERROR
           console.log('Error of undefined'); 
        }
    }

    $(document).on('click', '.open-employee', function(){
            if($scope.editDependent){
                var dependentID = $(this).data('id');
                var employee = $(this).data('parentid');
                //HOW TO GET THE 2-WAY BIND AND SEND THE OBJECT TO SAVE?
                //I should get my editDependent from the modal and add the parent id which is the employee id and proceed to save. But my scope is not good because $scope.editDependent is undefined. I should complement the info and
            }
    });

});

更新

我在控制器中添加了一个新方法

$scope.editDependent = function(){

    console.log('Test');
}

我使用ng-view =“editDependent（）”将方法链接到我的2个按钮（new / edit），但$ scope仍未定义。