Using AngularJs directive to update input value

Question

I'm trying to update my weatherApp input field

<input type="number" class="hidden-input" ng-model="updatedWeather.SurfaceWind.Gust" winds></input>

by using an Angular Directive:

.directive('winds', windDirective);

function windDirective () {
return {
    restrict: 'A',
    require: 'ngModel',
    scope : { ngModel : '=?'},
    link: function (scope, element, attrs, ngModel) {
        element.bind('change', function () {
            console.log(ngModel);
            scope.$apply(setAnotherValue());
        });
        function setAnotherValue() {
            ngModel.$setViewValue("hello!");
            console.log(ngModel);
            ngModel.$render();
        }
    }
};

}

I declared the directive and controller before this, and everything seems to be running (successfully logging to console). But for some reason, whenever I try and change my input field, the value defaults to 0, and nothing displays. Any help would be appreciated!

Answer 1

Here's my understanding of what you want:

Demo: http://codepen.io/ozzieorca/pen/XXmJvV

<div ng-app="myApp">
  <wind>
    <div>
      <label>Wind Speed</label>
      <input type="number" ng-model="wind.speed">
    </div>
    <div>
      <label>Add Gust</label>
      <input type="number" ng-model="newGust">
      <button ng-click="wind.addGust(newGust)">Add</button>
    </div>
    Wind Speed: {{wind.speed}}<br>
    Gusts: {{wind.gusts | json}}<br>
    Total: {{wind.calculateTotal()}}
  </wind>
</div>

angular
  .module('myApp', []);

angular
  .module('myApp')
  .directive('wind', wind);

function wind() {
  return  {
    restrict: 'EA',
    controller: WindController,
    controllerAs: 'wind',
    bindToController: true
  };

  function WindController() {
    var vm = this;
    vm.speed = 0;
    vm.gusts = [];
    vm.addGust = addGust;
    vm.calculateTotal = calculateTotal;

    function addGust(val) {
      vm.gusts.push(val);
    }

    function calculateTotal(){
      return vm.speed + vm.gusts.reduce( (prev, curr) => prev + curr, 0 );
    }
  }
}

I might still be a little confused. Let me know what you think. It sounds like you wanted the adding gusts and the total display in the same input. Maybe you could explain that a little more.