Controller as vm with ng-click

Question

I am trying to follow John Papa's Angular Style Guide however i cannot get the model data of input file with ngClick .

When i try with $scope everything works just fine.

Here is the Demo on Plnkr .

Glad for your help.

Answer 1

In the ng-model instead of assigning directly to vm, assign it to vm.data and pass vm.data as argument to ng-click like data-ng-click="vm.saveEvent(vm.data)"

<form>
                <fieldset>
                    <div class="form-group">
                      <label for="eventName">Event Name:</label>
                      <input id="eventName" type="text" data-ng-model="vm.data.name" placeholder="Name of your event"/>
                    </div>
                    <div class="form-group">
                      <label for="eventDate">Event Date:</label>
                      <input id="eventDate" type="text" data-ng-model="vm.data.date" placeholder="format (mm/dd/yyyy)"/>
                    </div>
                    <div class="form-group">
                      <label for="eventTime">Event Time:</label>
                      <input id="eventTime" type="text" data-ng-model="vm.data.time" placeholder="Time of your event"/>
                    </div>
                    <div class="form-group">
                      <label for="eventLocation">Event Location:</label>
                      <input id="eventLocation" type="text" data-ng-model="vm.data.location.addresss" placeholder="Address of your event"/>
                    </div>
                    <div class="form-group">
                      <input id="eventCity" type="text" class="input-small" data-ng-model="vm.data.location.city" placeholder="City"/>
                      <input id="stateProvince" type="text" class="input-small" data-ng-model="vm.data.location.province" placeholder="Province"/>
                    </div>
                    <div class="form-group">
                      <label for="eventImageUrl">Image:</label>
                      <input id="eventImageUrl" type="text" class="input-xlarge" data-ng-model="vm.data.imageUrl" placeholder="Url of image"/>
                    </div>


                </fieldset>
                {{vm.data.name}}

                <img data-ng-src="{{vm.data.imageUrl}}"/>
                <br/>
                <br/>
                <div class="form-group">
                  <button type="submit" class="btn btn-primary" data-ng-click="vm.saveEvent(vm.data)">Save</button>
                  <button type="button" class="btn btn-default" data-ng-click="vm.cancelEvent(vm.data)">Cancel</button>
                </div>

            </form>

Controller:

eventsApp.controller('EditEventController',
    function EditEventController() {

       var vm = this;
       this.data = {};

        vm.saveEvent = saveEvent;

        function saveEvent(event) {
            window.alert("event" + event.name + ' saved');
            console.log(vm.data);
        }

        //vm.saveEvent = function(event) {
        //    window.alert("event" + event.name + ' saved');
        //};
    }
);

http://plnkr.co/edit/AxdA7vc70aTw3RojofVY?p=preview

Answer 2

ng-click="vm.saveEvent(vm.data)" did not work for me with Angular 1.4.

My solution was to use the control variable name. eg "LoginController as loginctrl" so <button ng-click="loginctrl.doLogin()">Login</button>

Then in my control I was able to use this for the doLogin function inside my LoginController:

/* @ngInject */
function LoginController() {
    /*jshint validthis: true */
    var vm = this;
    vm.title = 'Login';

    function doLogin() {
        ...
    }