karma測試$ scope項目不工作/項目未被$ 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} 

所以一切正常，但在var element = angular.element('<div profile-image="profileImage"></div>')的profile-image="profileImage"被當作一個字符串。它沒有顯示價值'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. 
       } 
      } 
     }; 
    }) 
;