Question

我最近有一个编码挑战，因为它是垃圾而被拒绝了。没有太多的时间所以我把所有东西放在一个巨大的HTML文件/角度控制器中，所以我正在重写模板中试图让它更可重用。到目前为止，它进展顺利，但我遇到了一些无法访问ng-model的html模板的麻烦。每当我调试ng-model时，我都会得到未定义的内容。

这是顶层HTML：

<div class="col-md-8 box">
    <div class="panel panel-default">
        <div class="panel-heading">Companies</div>
        <div class="panel-body">
            <div ng-repeat="company in companies">
                <div class="panel panel-default">
                    <div class="panel-heading">Name: {{company.name}} <button ng-click="companies[$index].editCompany = !companies[$index].editCompany" class="pull-right">EDIT COMPANY</button></div>
                    <div class="panel-body" ng-if="!companies[$index].editCompany">
                        <p>Address: {{company.address}}</p>
                        <p>Revenue: {{company.revenue}}</p>
                        <p>Phone Number: {{company.phone}}</p>
                        <button ng-click="getPeople(companies[$index]._id, $index); companies[$index].viewEmployees = !companies[$index].viewEmployees">People Who Work Here</button>
                        <div ng-if="companies[$index].viewEmployees">
                            <show-employees-list></show-employees-list>
                        </div>
                    </div>
                </div>
                <div ng-if="companies[$index].editCompany">
                    <edit-company-directive></edit-company-directive>
                </div>
            </div>
        </div>
    </div>
</div>

这是指令的HTML：

<div class="employee-box" ng-repeat="employee in companies[$index].employees">
    <span class="glyphicon glyphicon-edit pull-right" ng-click="companies[$index].editEmployee = !companies[$index].editEmployee; clickEdit()"></span>
    <span class="glyphicon glyphicon-remove pull-right" ng-click="deletePerson(employee._id, $index, companies[$parent.$index].employees)"></span>
    <div ng-if="!companies[$index].editEmployee">
        <div>
            <p><b>Name:</b> {{employee.name}}</p>
            <p><b>Email:</b> {{employee.email}}</p>
        </div>
    </div>
    <div ng-if="companies[$index].editEmployee" class="form-body">
        <form name="editPersonForm" ng-submit="editPerson(employee._id, $parent.$parent.index, $parent.index)">
            <input type="text" ng-model="nameEdit" id="nameEdit" placeholder="Employee" class="form-control" required></input>
            <input type="text" ng-model="emailEdit" id="emailEdit" placeholder="Email" class="form-control" required></input>
            <button type="submit" id="submitButton" class="btn btn-success form-actions">Submit</button>
        </form>
    </div>
</div>

这是指令代码：

'use strict';

(function() {
    angular
        .module('sigFig')
        .directive('showEmployeesList', showEmployeesList);

    function showEmployeesList(sigFigFactory) {
        var directive = {
            restrict: 'E',
            templateUrl: 'Directives/showEmployeesList/showEmployeesList.html',
            scope: '=',
            require: '^parentDirective',
            link: link
        };
        return directive;

        function link(scope, element, attra, controller) {
            scope.deletePerson = function(id, index, employees) {
                sigFigFactory.deletePerson(id).then(function(response) {
                    employees.splice(index, 1);
                    return response;
                })
            };

            scope.editPerson = function(personId, index1, index2) {
                scope.person = {
                    name: scope.nameEdit,
                    email: scope.emailEdit
                };

                console.log('person ', scope.person);
            };
        }
    }
})();

我认为这是某种范围问题，我只是看不到，希望有人可以提供帮助。当console.log person对象获得undefined这两个属性时。

ANGULARJS：另一个指令内的指令无法访问HTML中的ng-model

0 个答案: