AngularJS 指令模板未更新

Question

尽管有监视，但模板指令没有更新。这里缺少什么？手表里面的日志确实在工作，为什么Html也没有变化？

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);
            });
        }
    }
});

在html中

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

Answer 1

错误

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

更好

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

AngularJS 表达式在作用域的上下文中进行评估。无需将其添加到 HTML。