为什么$ digest不更新单元测试中的范围

Question

I have the following code. For some reason test 1 is failing. Can anyone tell me why?

angular.
    module('myModule', []).
    directive('myDirective', function () {
        return {
            restrict: 'E',
            scope: {
                myAttr: '='
            },
            link: function (scope, element, attrs) {
                element.text(scope.myAttr);
            }
        }
    });

describe('test', function () {
    var compile, rootScope;

    beforeEach(module('myModule'));

    beforeEach(inject(function ($compile, $rootScope) {
        compile = $compile;
        rootScope = $rootScope;
    }));

    describe('test 1', function () {
        it('test', function () {
            scope = rootScope.$new();

            // scope.myVar = "test";

            element = compile('<my-directive my-attr="myVar" />')(scope);
            scope.$digest();

            scope.myVar = "test";
            scope.$digest();

            expect(element.text()).toBe("test");
        });
    });

    describe('test 2', function () {
        it('test', function () {
            scope = rootScope.$new();

            scope.myVar = "test";

            element = compile('<my-directive my-attr="myVar" />')(scope);
            scope.$digest();

            scope.myVar = "test";
            scope.$digest();

            expect(element.text()).toBe("test");
        });
    });
});

Answer 1

element.text(scope.myAttr); needs to be wrapped in a watch, like so:

angular.
    module('myModule', []).
    directive('myDirective', function () {
        return {
            restrict: 'E',
            scope: {
                myAttr: '='
            },
            link: function (scope, element, attrs) {
                scope.$watch('myAttr', function () {
                    element.text(scope.myAttr);
                });
            }
        }
    });