Widget w/mouseover & mouseout

Working widget with mouseover and mouseout :)

by danielzen

HTML

<div ng-app="cb">
    <div ng-init="item={name:'itemName'}">      
        <cb-folder-item item="{{item}}"></cb-folder-item>
     </div>
<hr/>
Debug: {{item}}
</div>
<hr/>

CSS

</style>
<script src="http://ci.angularjs.org/job/angular.js-angular-master/ws/build/angular.js"></script>
<script src="https://raw.github.com/pivotal/jasmine/master/lib/jasmine-core/jasmine.js"></script>
<script src="https://raw.github.com/pivotal/jasmine/master/lib/jasmine-core/jasmine-html.js"></script>
<script src="http://ci.angularjs.org/job/angular.js-angular-master/ws/build/pkg/1.0.0rc3-2ce0485e/angular-mocks-1.0.0rc3-2ce0485e.js"></script>
<link rel="stylesheet" type="text/css" href="http://tryjasmine.com/js/vendor/jasmine-1.1.0/jasmine.css">
<style>

JavaScript

angular.module("cb",[])
  .directive('cbFolderItem', function () {
    return {
      restrict: 'E',
      replace: true,
      scope: { item: 'evaluate' },
      template: '<span>Item: {{item.name}}</span>'
    }
  }
);

  describe('cb-folder-item', function () {
    beforeEach(module('cb'));
    it('shold show item.name',
      inject(function ($rootScope, $compile) {
        var element = $compile(
            '<cb-folder-item item="{{testItem}}"></cb-folder-item>')($rootScope);
        $rootScope.testItem = {name:'itemName'};
        $rootScope.$apply();
        expect(element.text()).toBe('Item: itemName');
      }));
  });
    
(function() {
    var jasmineEnv = jasmine.getEnv();
    jasmineEnv.updateInterval = 1000;

    var trivialReporter = new jasmine.TrivialReporter();
    jasmineEnv.addReporter(trivialReporter);

    jasmineEnv.specFilter = function(spec) {
        return trivialReporter.specFilter(spec);
    };

    $(function() {
        jasmineEnv.execute();
    });
})();