angular .module('Todo', []) .controller('CountCtrl', function CountCtrl() { this.count = 4; }) .directive('counter', function counter() { return { scope: {}, bindToController: { count: '=' }, controller: function () { function increment() { this.count++; } function decrement() { this.count--; } this.increment = increment; this.decrement = decrement; }, controllerAs: 'counter', template: [ '<div class="todo">', '<input type="text" ng-model="counter.count">', '<button type="button" ng-click="counter.decrement();">-</button>', '<button type="button" ng-click="counter.increment();">+</button>', '</div>' ].join('') }; }); document.addEventListener('DOMContentLoaded', function () { angular.bootstrap(document, ['Todo']); });
<div ng-controller="CountCtrl as vm"> <counter count="vm.count"></counter> </div>
</style> <script src="//code.angularjs.org/1.5.0/angular.min.js"></script> <style> * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; font: 300 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; } body { background: #eee; margin: 0; padding: 25px; }