Question

我有一个列出学生的容器指令，以及一个用于通过模态编辑数据的子指令。因此，我想将student对象传递给隔离范围中的child指令，以便对其进行编辑。问题是对象没有被传递。

这就是我所拥有的：

angular.module('accountsApp.students.directives', ['ngRoute'])

.directive('studentsList', ['UserStudents', function($scope, UserStudents) {
    // Create isolate scope and get student list
    return {
        restrict: "E",
        templateUrl: '/studentsList.html',
        controller: function($scope, UserStudents){
            // Get students of user and add to scope
            var students = UserStudents.query({
                userId: $scope.userid
            }, function(data) {
                $scope.students = data;
            });
        }
    }
}])

.directive('studentEdit', function(){

    return {
        restrict: "E",
        templateUrl: '/studentEdit.html',
        scope: {
            student: "@student",
            index: "@index"
        }
    }
})

/studentsList.html：

<li ng-repeat="student in students">
    <p>{{ student.firstname }}</p>
    <student-edit student="{{ student }}" index="{{ $index }}"></student-edit>
</li>

/studentEdit.html：

<div class="modal">
    <label for="student-edit-{{ $index }}">
        <div class="btn js-btn" ng-click="editStudent(student)">Edit</div>
    </label>
    <input class="modal-state" id="student-edit-{{ $index }}" type="checkbox" />
    <div class="modal-window">
        <div class="modal-inner">
            <label class="modal-close" for="student-edit-{{ $index }}"></label>
            <h1>Editing {{ student.firstname }} {{ student.lastname }}</h1>
            <form>
                <label for="student-firstname">First Name</label>
                <input type="text" name="student-firstname" ng-model="student.firstname" />
                <div ng-show="errors.firstname" ng-repeat="message in errors.firstname">{{ message }}</div>

                <label for="student-lastname">Last Name</label>
                <input type="text" name="student-lastname" ng-model="student.lastname" />
                <div ng-show="errors.lastname" ng-repeat="message in errors.lastname">{{ message }}</div>

                <label for="student-email">Contact Email Address</label>
                <input type="text" name="student-email" ng-model="student.email" />
                <div ng-show="errors.email" ng-repeat="message in errors.email">{{ message }}</div>

                <button class="btn js-btn" type="button" ng-click="saveStudent(student, $index)">Save</button>
                <button class="btn js-btn" type="button" ng-click="cancelModal($index)">Cancel</button>
            </form>
        </div>
    </div>
</div>

奇怪的是，如果我在studentEdit.html中评估{{ student }}，它会显示整个对象，但我无法访问{{ student.firstname }}。

This plunk是问题的简化 - 也就是为什么我可以看到对象但不能访问属性？

Answer 1

对于双向绑定，您不应该使用双括号，因此您的学生列表的模板应如下所示：

<li ng-repeat="student in students">
    <p>{{ student.firstname }}</p>
    <student-edit student="student" index="{{ $index }}"></student-edit>
</li>

在stundeEdit指令中你应该使用＆＃34; =＆＃34; ＆＃34; @＆＃34; for scope.student ie：

app.directive('studentEdit', function() {

  return {
    restrict: "E",
    templateUrl: 'studentEdit.html',
    scope: {
      student: "=student",
      index: "@index"
    }
  }
})

请在此处查看示例演示http://plnkr.co/edit/P31hG5ADJp1TpHfNR0a0?p=preview

将对象从指令传递给指令

1 个答案: