지시어에서 지시어로 객체 전달하기

Question

나는 학생들을 나열하는 컨테이너 지시어와 모달을 통해 데이터를 편집하는 데 사용되는 자식 지시어를 가지고있다. 그래서 그것을 편집하기 위해 고립 된 범위에있는 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에 {{ student }}을 평가하는 경우 .html, 그것은 전체 객체를 보여 주지만, 나는 접근 할 수 없다, 말하자면, {{ student.firstname }}.

This plunk은 문제의 단순화입니다. 즉, 개체를 볼 수는 있지만 속성에 액세스 할 수없는 이유는 무엇입니까?

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

및 stundeEdit에

당신이 범위에 대한 "@"의 "="instad를 사용해야합니다 지시문 : 당신이 당신의 학생 목록 템플릿 있도록 이중 중괄호를 사용하지 말아야 바인딩이 방법에 대한

Answer 1

은해야 것 같습니다. 학생 예 :

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

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

여기 http://plnkr.co/edit/P31hG5ADJp1TpHfNR0a0?p=preview