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/292/artifact/build/pkg/1.0.0rc3-5c5b1183/angular-1.0.0rc3-5c5b1183.min.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: { theItem:'accessor' },
templateUrl: 'folderItemTemplate'
}
}
);
describe('directives', function(){
var scope, element, mockItem, itemName, MockItem;
beforeEach(module('cb'))
describe('cb-folder-item', function () {
it('should show item.name',
inject(function ($rootScope, $compile) {
var itemName = "theItem";
$rootScope.passedItem = { name: itemName};
element = $compile(
'<script type="text/ng-template" id="folderItemTemplate">' +
'<div>{{theItem().name}}</div>' +
'</script>' +
'<cb-folder-item the-item="passedItem"></cb-folder-item>')($rootScope);
$rootScope.$apply();
expect(element[0].innerHTML).toBe(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();
});
})();