【发布时间】:2017-01-30 10:13:14
【问题描述】:
我一直在寻找像我这样的问题的绝妙答案,但仍然找不到可行的替代方案,或者我的代码失败的原因。 实际上,我确实发现有人发布了与我的问题非常相似的问题,但是给他的答案也对我不起作用……而且我对 js 和 Angular 太陌生,无法自己发现差异。 我希望你能帮我一把?
这是我的 Directives.js
var directives = angular.module("directives", []);
directives.constant("mvcRoutes", {
items: {},
called: function (name) {
var value = this.items[name];
if (!value) throw "Could not find route for " + name + " make sure its realy added/defined through script tag!";
return value;
}
});
在那之后,我有我的服务:
directives.service("countryService", ["$http", "mvcRoutes", "$q", function ($http, mvcRoutes, $q) {
return {
search: function (text) {
return $http.post(mvcRoutes.called("country.search"), { text: text});
}
};
}]);
最后,我的指令:
directives.directive("countrySelector", ["countryService", "$rootScope", function (countryService, $rootScope) {
var myCtrl;
return {
restrict: "E",
template: '<input type="text" id="{{::elementId}}" name="{{::elementId}}" class="form-control" autocomplete="off" ng-required="" ng-model="country" typeahead-select-on-blur="true" ng-maxlength="50" typeahead-select-on-exact="true" ng-model-options="{ debounce: 800, allowInvalid: true }" uib-typeahead="item.id as item.name for item in getCountries($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" typeahead-template-url="country-template.html" typeahead-show-hint="true" typeahead-min-length="1" typeahead-on-select="itemSelected($item, $model, $label, $event)">',
scope: { elementId: "@elementId", country: "=ngModel", required: "=?ngRequired" },
link: function (scope, element, attr, ctrl) {
myCtrl = ctrl;
},
controller: ["$scope", function ($scope) {
$scope.getCountries = function (text) {
return countryService.search(text).then(function (response) { return response.data });
}
if (!$scope.elementId) $scope.elementId = "country";
$scope.itemSelected = function ($item, $model, $label) {
$scope.country = $label;
$rootScope.$broadcast("countrySelector.selected", { id: $scope.elementId, label: $label });
}
}]
}
}]);
我的控制器定义也很简单,如下所示:
[RoutePrefix("{site}/country")]
public class CountryController : Controller
{
// GET: Country
[Route("search")]
public ActionResult Search(string text)
{
using (var connection = CreateSqlConnection.ToRepairRequestDb())
{
connection.Open();
return new CountryQuery(text).Execute(connection).AsJsonResult();
}
}
}
public class CountryQuery : SqlQuery<CountryModel>
{
public CountryQuery(string text, int maxRows = 6)
{
Parameters = new { text = text.AsSqlWildcard(false), maxRows };
SqlText = @"
SELECT TOP (@maxRows) CountryID AS ID, CountryName as Name FROM Countries
WHERE
(@text IS NULL OR CountryID LIKE @text OR CountryName LIKE @text)
ORDER BY CountryName asc";
}
}
但是当我运行它时,我得到了这个堆栈:
TypeError: mvcRoutes.called is not a function
at Object.search (Directives.js:95)
at Scope.$scope.getCountries (Directives.js:113)
at Object.fn [as source] (eval at compile (angular.js:13322), <anonymous>:4:317)
at getMatchesAsync (ui-bootstrap-tpls.js:7224)
at Array.<anonymous> (ui-bootstrap-tpls.js:7451)
at NgModelController.$$parseAndValidate (angular.js:25256)
at NgModelController.$commitViewValue (angular.js:25246)
at angular.js:25383
at angular.js:17855
at completeOutstandingRequest (angular.js:5507)
知道我做错了什么,以及如何解决吗?
提前致谢!!
【问题讨论】:
标签: javascript angularjs web-applications