javascript - Controller 作为带有 ng-click 的 vm

Question

我正在尝试关注 John Papa 的 Angular Style Guide但是我无法使用 ngClick 获取输入文件的模型数据。

当我尝试使用 $scope 时，一切正常。

这是 Demo on Plnkr .

很高兴得到你的帮助。

Answer 1

在 ng-model 中，不是直接分配给 vm，而是将其分配给 vm.data 并将 vm.data 作为参数传递给 ng-click，如 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