2015-11-04 77 views
-1

这里是我的指令:为什么我不能在茉莉花测试中访问指令的范围?

angular.module('app') 
    .directive('statusFilter',statusFilter); 

function statusFilter() { 
    return { 
     restrict: 'E', 
     replace: true, 
     templateUrl: 'app/directives/status-filter.html', 
     scope: { 
      flags: '=' 
     }, 
     controller: function($scope, $element, $timeout, $document) { 

      function isChildElement(el) { 
       return $.contains($element[0], el); 
      } 

      function close(event) { 
       if (!isChildElement(event.target)) { 
        $scope.$apply(function() { 
         $scope.isOpen = false; 
        }); 
        $document.off('mouseup', close); 
       } 
      } 

      function updateFlags(value) { 
       for (var prop in $scope.flagsClone) { 
        $scope.flagsClone[prop] = value; 
       } 
      } 

      function pullFlags() { 
       $scope.flagsClone = $.extend(true, {}, $scope.flags); 
      } 

      function pushFlags() { 
       for (var prop in $scope.flagsClone) { 
        $scope.flags[prop] = $scope.flagsClone[prop]; 
       } 
      } 

      $scope.isOpen = false; 
      $scope.flagsClone = {}; 

      pullFlags(); 

      $scope.apply = function() { 
       pushFlags(); 
       $scope.isOpen = false; 
      }; 

      $scope.selectAll = function() { 
       updateFlags(true); 
      }; 

      $scope.selectNone = function() { 
       updateFlags(false); 
      }; 

      $scope.open = function() { 
       if (!$scope.isOpen) { 
        pullFlags(); 
        $scope.isOpen = true; 

        $timeout(function() { 
         $document.on('mouseup', close); 
        }); 
       } 
      }; 
     } 

    }; 

} 

这里有一个简单的测试,我写的是:

describe('status-filter directive', function() { 
    beforeEach(module('app')); 

    var template = '<status-filter flags="filters"></status-filter>'; 
    var scope, element; 


    beforeEach(inject(function($rootScope, $compile) { 
     scope = $rootScope.$new(); 
     var ngElement = angular.element(template); 
     element = $compile(ngElement)(scope); 
     scope.$digest(); 
    })); 

    it('Should open when isOpen is true', function() { 
     scope.open(); 
     scope.$digest(); 

     expect(scope.isOpen).toBe(true); 


    }); 
}); 

我不能访问该指令的范围,无论我如何努力。像上面的例子一样,.isolateScope(),element.scope()。随着任何我尝试我得到open() is undefined错误。我的代码有什么问题?

回答

0

我无法访问范围的原因是我没有创建过滤器变量。所以这将工作:

describe('status-filter directive', function() { 
    beforeEach(module('app')); 

    var template = '<status-filter flags="filters"></status-filter>'; 
    var scope, element; 


    beforeEach(inject(function($rootScope, $compile) { 
     scope = $rootScope.$new(); 
     scope.filters = { 
      filter1:true; 
     } 

     var ngElement = angular.element(template); 
     element = $compile(ngElement)(scope); 
     scope.$digest(); 
    })); 

    it('Should open when isOpen is true', function() { 
     scope.open(); 
     scope.$digest(); 

     expect(scope.isOpen).toBe(true); 


    }); 
});