Question

在AngularJs中测试指令时出错：

INDEX_SIZE_ERR：INDEX_SIZE_ERR：DOM例外1（第14925行）
错误：INDEX_SIZE_ERR：DOM例外1

代码：

beforeEach( inject( function(_$rootScope_, _$compile_ ) {
    $rootScope = _$rootScope_;
    $compile = _$compile_;
    $scope = $rootScope.$new();
    $scope.size = 100;
    $scope.currentBenchmark = { id : '' };
    elem = angular.element( '<pub-toolbar></pub-toolbar>' );
    elem = $compile( elem )( $scope );
    $scope.$digest();
} ) );

describe( 'Testing for watches', function() {

    it( 'currentBenchmark.id ', function() {
        expect( true).toBe( true );
    } );
} );

这是html页面：

<tf-toolbar tf-theme="carbon" id="app-toolbar"> 
  <div >
    <tf-progress-indicator progress='"indeterminate"' size="small" style="position:relative; top:3px " ></tf-progress-indicator>
  </div>
  <div >
    <tf-progress-indicator progress='"indeterminate"' size="small" style="position:relative; top:3px " ></tf-progress-indicator>
  </div>
</tf-toolbar>

从html中删除tf-progress-indicator后，它运行正常。

DIrective code：

(function() {
    'use strict';

    function pubToolbarDrct( pubReportState, pubGetSanitizedDate, pubDateUtils ){
        return {
            restrict: 'E',
            templateUrl: 'drcts/toolbar/templates/pub-toolbar.html',
            controller: 'pubToolbarCtrl',
            link: function( scope, element ) {
                scope.$watch( 'currentPortfolio.id', function( query, oldQuery ) {
                    if ( !query ) {
                        scope.pubReportState.selectedPortfolio = {
                            description:'',
                            eMethodology:0,
                            gui_path:'',
                            id:''
                        };
                        return;
                    }
                    scope.pubReportState.setPortfolio( scope.currentPortfolio );
                    if ( scope.currentPortfolio.benchmark && scope.currentPortfolio.benchmark.id ) {
                        pubReportState.setBenchmark( scope.currentPortfolio.benchmark );
                        scope.currentBenchmark.id = scope.pubReportState.selectedBenchmark.value;
                    }
                });

            } // end link function
        };
    }
    angular.module( 'pubApp' ).directive( 'pubToolbar', pubToolbarDrct );
})();

感谢。

Answer 1

我回答自己的问题真的很有趣。由于指令

而引发错误

<tf-progress-indicator progress='"indeterminate"' size="small" style="position:relative; top:3px " ></tf-progress-indicator>

因为它需要.gif图像。只是一点点破解。当我们测试指令pub-toolbar时，我们可以模拟tf-progress-indicator指令，以便它永远不会被调用。

以下代码是模拟指令：

beforeEach( module( 'yourModule', function( $compileProvider ) {
        $compileProvider.directive( 'nameOfDirectiveToMock', function() {
            var def = {
                priority: 100,
                terminal: true,
                restrict:'E',
                template:'<div ></div>'
            };
            return def;
        } );
    } ) );

AngularJs中

1 个答案: