StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Essentially you need to re-use a template (/controller), and somehow pass options into it. You could probably do something with <code>ngInclude</code> and nesting controllers, but a way that is more friendly to more complex structure later is to create a custom directive. It depends a bit on your exact use-case, and exactly what you need to pass into it, but a simple version would be something like:</p> <pre><code>app.directive('formButtons', function() { return { restrict: 'E', scope: { 'localBack':'&back', 'localSave':'&save', 'localSaveAndContinue':'&saveAndContinue' }, templateUrl: 'buttons.html' }; }); </code></pre> <p>With a template of</p> <pre><code><div> <button ng-click="localBack()">Back</button> <button ng-click="localSave()">Save</button> <button ng-click="localSaveAndContinue()">Save &amp; Continue</button> </div> </code></pre> <p>The scope options with <code>&</code> each define a function on the directive's scope, that evaluates contents of the attribute on the <code><form-buttons></code> element of that name in the parent scope. You can then use the directive as follows</p> <pre><code><form-buttons back="back(2)" save="save(2)" save-and-continue="saveAndContinue(2)"></form-buttons> </code></pre> <p>which will get replaced by the template of the directive, and the function <code>save</code>, <code>back</code> and <code>saveAndContinue</code>, which are defined on the parent scope, will get called when clicking on the buttons in the template, passing the appropriate step number which can be used to customise behaviour.</p> <p>You can see a working example at <a href="http://plnkr.co/edit/fqXowQNYwjQWIbl6A5Vy?p=preview" rel="nofollow">http://plnkr.co/edit/fqXowQNYwjQWIbl6A5Vy?p=preview</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload