CODEWITHSUNDEEP
angularjsangularjs-directive
babbaggeii
babbaggeii

Reputation: 7747

Passing object from directive to directive

I have a container directive that lists students, and a child directive that is used to edit the data via a modal. So I want to pass the student object to the child directive in an isolate scope in order to edit it. The problem is that the object is not being passed through.

Here's what I've got:

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>

Oddly, if I evaluate {{ student }} in studentEdit.html, it shows the whole object, yet I cannot access, say, {{ student.firstname }}.

This plunk is a simplification of the problem - i.e. why can I see the object but not access the properties?

Upvotes: 0

Views: 131

Answers (1)

sylwester
sylwester

Reputation: 16508

for two way binding you shouldn't use double braces so template for your student list should looks like:

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

and in stundeEdit directive you should use "=" instad of "@" for scope.student ie:

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

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

Please see sample demo here http://plnkr.co/edit/P31hG5ADJp1TpHfNR0a0?p=preview

Upvotes: 1

Related Questions