ng-click 不使用 Controller-As 语法触发
ng-click not firing with Controller-As syntax
在我的 HTML
中,我有一个 ng-click
指令,它在我的 ProductListCtrl
中调用一个函数。我正在使用 Controller As
语法,但我不知道为什么它不起作用。您通常只是使用语法将它附加到 this.
,但出了点问题。
这是我的HTML
。
<form class="span2 pull-right" style="display: inline;">
<label for="searchItem" style="font-size: large; font-weight: normal;">Item Code:</label>
<input id="searchItem" type="search" style="color: #337ab7;" ng-model="vm.searchCriteria" />
<button id="itemLookUpBtn" class="btn btn-sm" style="vertical-align: top; color: #337ab7;" ng-click="lookUpItem">Search</button>
</form>
这是我的controller
。
(function () {
"use strict";
var app = angular.module("productManagement")
var ProductListCtrl = function (productResource) {
var vm = this;
vm.searchCriteria = null;
productResource.query(/*{ $filter: "Price le 20", $orderby: "Price desc" },*/ function (data) {
vm.products = data;
});
vm.lookUpItem = function () {
console.log("Here");
productResource.query({ search: vm.searchCriteria }, function (data) {
if (data.length == 0) {
vm.noProducts = "No Results";
vm.products = null;
} else {
vm.noProducts = null;
vm.products = data;
}
});
}
}
app.controller("ProductListCtrl", ["productResource", ProductListCtrl]);
}());
请使用 ProductListCtrl.lookUpItem(),如下所示 -
<button id="itemLookUpBtn" class="btn btn-sm" style="vertical-align: top; color: #337ab7;" ng-click="ProductListCtrl.lookUpItem()">Search</button>
在我的 HTML
中,我有一个 ng-click
指令,它在我的 ProductListCtrl
中调用一个函数。我正在使用 Controller As
语法,但我不知道为什么它不起作用。您通常只是使用语法将它附加到 this.
,但出了点问题。
这是我的HTML
。
<form class="span2 pull-right" style="display: inline;">
<label for="searchItem" style="font-size: large; font-weight: normal;">Item Code:</label>
<input id="searchItem" type="search" style="color: #337ab7;" ng-model="vm.searchCriteria" />
<button id="itemLookUpBtn" class="btn btn-sm" style="vertical-align: top; color: #337ab7;" ng-click="lookUpItem">Search</button>
</form>
这是我的controller
。
(function () {
"use strict";
var app = angular.module("productManagement")
var ProductListCtrl = function (productResource) {
var vm = this;
vm.searchCriteria = null;
productResource.query(/*{ $filter: "Price le 20", $orderby: "Price desc" },*/ function (data) {
vm.products = data;
});
vm.lookUpItem = function () {
console.log("Here");
productResource.query({ search: vm.searchCriteria }, function (data) {
if (data.length == 0) {
vm.noProducts = "No Results";
vm.products = null;
} else {
vm.noProducts = null;
vm.products = data;
}
});
}
}
app.controller("ProductListCtrl", ["productResource", ProductListCtrl]);
}());
请使用 ProductListCtrl.lookUpItem(),如下所示 -
<button id="itemLookUpBtn" class="btn btn-sm" style="vertical-align: top; color: #337ab7;" ng-click="ProductListCtrl.lookUpItem()">Search</button>