× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Do not name directive isolate scope properties like dataXyz

Michael Perrenoud
Jun 24, 2015
<p>Consider a directive like this:</p> <pre><code class="language-javascript"> module.directive('customerList', function() { return { restrict: "E", templateUrl: 'customer/customer-list.tpl.html', scope: { tableOptions: '=', dataSource: '=' } } }); </code></pre> <p>You will find that <code>dataSource</code> will <strong>always be undefined</strong>; no matter what you send through the directive! The reason? The scope property needs to be assigned with an attribute like <code>data-source</code> and that will not be interpreted. Why? Because it appears to be an HTML5 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes"><code>data</code> attribute</a> and those are used for arbitrary data; AngularJS is not going to even look at that value!</p> <p>How do you fix it? Simple, change the directive to this:</p> <pre><code class="language-javascript"> module.directive('customerList', function() { return { restrict: "E", templateUrl: 'customer/customer-list.tpl.html', scope: { tableOptions: '=', datasource: '=' } } }); </code></pre> <p>Now you can set the <code>datasource</code> instead of the <code>data-source</code> and viola the attribute binds!</p>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus