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＆amp; p1 = invalid％20key＆amp; p2 = 11＆amp; p3 = editDependent（％7B％7Bdependent.id％7D％7D）及P4 =％7Bdependent.id％7D％7D）

我正在尝试将我的依赖ID传递给我的模态，而前一个范围也包含有关该员工的信息。那么如何实现这个参数传递呢？

这是我的主要控制器

check()

这是我的依赖控制器来捕捉值

    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;
        }
    });

更新

employee.html

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();
    }
});

这是我的modal_dependent.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>

更新

我将控制器更改为在$ scope.dependent之前初始化

<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>

解决

我的按钮已从此更改

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>

Answer 1

我认为你必须定义解析错误

使用前，或者你可以将它用作模型（如果你在这样的前端提交表格）

$scope.dependentid = {};

如果您编辑代码并添加一些前端html

，最好向我了解

将值/参数发送到uibModal angular

1 个答案: