Question

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

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

很高兴为您提供帮助。

Answer 1

在ng-model中，而不是直接分配给vm，将其分配给vm.data并将vm.data作为参数传递给ng-click，如data-ng-click =“vm.saveEvent（vm.data）”< / p>

<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>

控制器：

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

使用Angular 1.4，

ng-click =“vm.saveEvent（vm.data）”对我无效。

我的解决方案是使用控制变量名称。例如"LoginController as loginctrl"所以<button ng-click="loginctrl.doLogin()">Login</button>

然后在我的控制中，我能够将它用于我的LoginController中的doLogin函数：

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

    function doLogin() {
        ...
    }

使用ng-click控制器为vm

2 个答案: