How can I access input values outside of a directive (num1, num2) to calculate the result (addition) when a button is clicked? Here is my HTML:
<div ng-app="sumApp" >
<div ng-controller='sumAppCtrl' >
<input ng-model='num1' type='text' >
<span>+</span>
<input ng-model='num2' type='text'>
<span>=</span>
<bp-sum></bp-sum>
<input type="button" value="Sum" ng-click="sumNumbers(num1,num2)" />
</div>
</div>
And here is the JavaScript code snippet:
var sumApp = angular.module('sumApp', []);
sumApp.controller("sumAppCtrl", function ($scope) {
});
sumApp.directive('bpSum',function( ){
return {
restrict:'E',
controller: function($scope, $element){
$scope.sumNumbers = function(num1, num2){
var items=[parseInt(num1), parseInt(num2)];
$scope.addition = _.reduce(items, function(memo, num){ return memo + num; }, 0);
}
},
template:"<input type='text' ng-model='addition' />"
}
})