javascript - $scope 项目的 karma 测试不工作/项目未由 $compile 触发

Question

我为我的 AngularJS 应用程序创建了一个指令，它检查 $scope 以查看个人资料图像是否存在。如果是，则指令通过附加新的 DIV 来显示图像，如果不是，则通过 css 类显示默认值。该指令看起来像这样...并且它在应用程序中有效。

    .directive('profileImage',function() {
        return {
            restrict: 'A',
            scope: {
                profileImage: '='
            },
            link: function(scope, element) {
                if(!scope.profileImage) {
                    element.addClass('icon-default-profile-image defaultProfileImage');
                } else {
                    element.append('<img ng-src="profileImage" class="profileImage">');
                }
            }
        };
    })
;

现在我希望为此编写一个单元测试(我知道我应该先这样做，但我只是在学习测试)。我写了以下内容:

it('should display a specific image', inject(function($rootScope, $compile) {
        //$rootScope.profileImage = "srcOfImage";
        $scope = $rootScope;
        $scope.profileImage = "srcOfImage";

        var element = angular.element('<div profile-image="profileImage"></div>')
        element = $compile(element)($scope)
        console.log(element);

        var imgElem = element.find('img');
        expect(imgElem.length).toBe(1);
        expect(imgElem.eq(0).attr('src')).toBe('srcOfImage');


    }));

现在，在这种情况下测试失败(没有 $scope.profileImage 可用的其他测试已通过)。当我输出我创建的元素时，我得到以下结果:

LOG: {0: <div profile-image="profileImage" class="ng-scope ng-isolate-scope"><img ng-src="profileImage" class="profileImage"></div>, length: 1}

所以一切正常，除了 profile-image="profileImage"在 var element = angular.element('<div profile-image="profileImage"></div>')被视为文字字符串。它没有显示值 'srcOfImage' 。我做错了什么？

错误看起来像这样:

PhantomJS 1.9.2 (Mac OS X) Profile Image Directive should display a specific image FAILED
-src="prExpected undefined to be 'srcOfImage'.>, length: 1}

非常感谢您的任何建议/帮助/解释

Answer 1

这是预期的行为，因为:

element.append('<img ng-src="profileImage" class="profileImage">');

附加一个普通的 DOM 图像无需编译，因此属性按原样添加。 尝试:

element.append('<img ng-src="profileImage" class="profileImage">');
$compile(element.contents())(scope); //adding this line to compile the image.

请记住在指令中声明 $compile 服务:

.directive('profileImage',function($compile) {

还有一个问题是您必须将 ng-src 与 {{}} 一起使用，如下所示:

ng-src="{{profileImage}}"

您的最终指令如下所示:

.directive('profileImage',function($compile) { //declare $compile service.
        return {
            restrict: 'A',
            scope: {
                profileImage: '='
            },
            link: function(scope, element) {
                if(!scope.profileImage) {
                    element.addClass('icon-default-profile-image defaultProfileImage');
                } else {
                    element.append('<img ng-src="{{profileImage}}" class="profileImage">');
                    $compile(element.contents())(scope); //adding this line to compile the image.
                }
            }
        };
    })
;