angular | |
.module('myApp', []) | |
.controller('MyController', MyController) | |
.controller('MyDirectiveController', MyDirectiveController) | |
.directive('myAwesomeDirective', myAwesomeDirective); | |
function MyController() { | |
var vm = this; | |
vm.myValue = 'Initial Value'; | |
vm.updateValue = function(value) { | |
vm.myValue = value; | |
}; | |
} | |
function MyDirectiveController() { | |
var vm = this; | |
vm.buttonClick = function() { | |
var value = vm.directiveValue.toUpperCase(); | |
// Note: param is `valueToUpdate` not `value` since we | |
// defined it as `valueToUpdate` in the html parameter | |
vm.updateFunction({valueToUpdate: value}); | |
} | |
} | |
function myAwesomeDirective() { | |
var template = '<input class="form-control" type="text" ng-model="vm.directiveValue">'; | |
template += '<button class="btn btn-warning" ng-click="vm.buttonClick()">Update!</button>'; | |
return { | |
restrict: 'E', | |
controller: 'MyDirectiveController', | |
controllerAs: 'vm', | |
bindToController: true, | |
scope: { | |
updateFunction: '&' | |
}, | |
template: template | |
}; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment