控制器为vm，点击ng

Controller as vm with ng-click

本文关键字：点击 ng vm 控制器      更新时间：2023-09-26

我正在尝试遵循John Papa的Angular Style Guide，但我无法使用ngClick获得输入文件的模型数据。

当我尝试使用$scope时，一切都很好。

这是Plnkr上的演示。

很高兴得到你的帮助。

在ng模型中，不是直接分配给vm，而是将其分配给vm.data，并将vm.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>

控制器：

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

ng-click="vm.saveEvent（vm.data）"不适用于Angular 1.4。

我的解决方案是使用控制变量名。例如"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() {
        ...
    }
相关文章：