CODEWITHSUNDEEP
angularjsdirective
Greggz
Greggz

Reputation: 1799

AngularJS Directive template not updating

The template directive is not updating despite the watch.. what's missing here ? The logs inside the watch are indeed working, so why does not the Html also change ?

college.directive('showTeacherInfo', function ($http) {
    return {
        restrict: 'E',
        transclude: true,
        scope: {
            'subject': '@subjectId'
        },
        template: '<div> {{ scope.teacher | json }} </div>',
        link: function (scope, element, attrs) {
            console.log('Retrieving teacher information ...');
            scope.teacher = {}; 

            var getTeacherInfo = function () {
                if (!isNaN(scope.subject)) {
                    $http(
                        {
                            method: 'GET',
                            url: '/Subject/GetTeacherOfSubject',
                            params: { id: scope.subject }
                        }).then(function successCallback(response) {
                            if (response.data) {
                                scope.teacher = response.data;
                            }
                        }, function errorCallback(response) {
                            console.log(response);
                        });
                }
            };                
            attrs.$observe('subjectId', function () {
                getTeacherInfo();
            });
            scope.$watch('teacher', function () {
                console.log(scope.teacher);
            });
        }
    }
});

And in the html

<show-teacher-info subject-id="{{currentSubjectID}}"></show-teacher-info>

Upvotes: 0

Views: 99

Answers (1)

georgeawg
georgeawg

Reputation: 48948

ERRONEOUS

template: '<div> {{ scope.teacher | json }} </div>',

BETTER

template: '<div> {{ teacher | json }} </div>',

AngularJS expressions are evaluated in the context of scope. There is no need to add it to the HTML.

Upvotes: 1

Related Questions