Skip to content

Instantly share code, notes, and snippets.

@abruzzi
Created December 26, 2013 12:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save abruzzi/8133148 to your computer and use it in GitHub Desktop.
Save abruzzi/8133148 to your computer and use it in GitHub Desktop.
define(['angular',
'directives/directives',
'directives/expander-directive'], function() {
describe("expander directives", function() {
var element, scope;
beforeEach(function() {
module('directives');
module('views/expander.html');
inject(function($compile, $rootScope) {
scope = $rootScope;
scope.title = "great title for click";
element = angular.element("<expander expander-title='title'><span>Content</span></expander>");
$compile(element)($rootScope);
});
});
it("should generate an expander", function() {
scope.$digest();
expect(element.find('.title').text()).toContain("great title for click");
});
});
});
define(['directives/directives'], function(directives) {
directives.directive('expander', function() {
return {
restrict: "EA",
replace: true,
transclude: true,
scope: {title: "=expanderTitle"},
templateUrl: 'views/expander.html',
link: function(scope, element, attrs) {
var titleElement = angular.element(element.children().eq(0));
var bodyElement = angular.element(element.children().eq(1));
titleElement.bind('click', toggle);
function toggle() {
bodyElement.toggleClass('closed');
}
}
};
});
});
<expander class="expander" expander-title="title">
<highchart value="chartData" type="line" width="300" height="200"/>
</expander>
<expander class="expander" expander-title="title">
<highchart value="chartData" type="area" width="300" height="200"/>
</expander>
<expander class="expander" expander-title="title">
<div class="settings" id="settings">
<label for="">Period</label>
<input type="text" value="day" />
<label for="">Date</label>
<input type="text" value="2013-12-21" />
<input type="submit" value="search" />
</div>
</expander>
<div>
<div class="title">
{{title}}
</div>
<div class="body closed" ng-transclude>
</div>
</div>
@avikenjale
Copy link

In 'AngularJS' written by Brad Green & Shyam Seshadri, in 'Directives' Chapter-6, 'scope' section table 6-5, page 131, for scope:{title:'=expanderTitle'}, line says: we could have written scope:{expanderTitle:'='} and referred to it as expanderTitle withinout template instead. But in case other directives also have a title attribute.
This line got bit confusing to me. as expanderTitle could be same as expander-title attribute and expanderTitle could have using in scope and so in template, then how can that be conflicting / has ambiguity with other directive's title property?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment