javascript - 如何使用 $scope 和 ng-bind 检索 AngularJS 中的文本框条目

Question

我目前正在尝试扩展 Umbraco 后台，为此我需要使用 Angular Js。到目前为止一切进展顺利，我已经连接了一个按钮，该按钮可以向 WebApi Controller 发出请求并返回服务更新已发生的确认信息，但是，我现在想包含一个文本框，用户可以在其中输入一个数字然后作为查询字符串参数附加到 AngularJs 中的 WebApi 调用。

这是迄今为止我的代码:

HTML:

<div ng-controller="AxumUpdateService">
    <h3>Axum Synchronisation</h3>
    <p>The following methods will allow you to trigger manual updates of your Umbraco site by making use of some web services</p>
    <div class="update-type clearfix">
        <div class="left-col">
            <h4>Update All Group Tours</h4>
            <p>Synchronise all changes to group tours that have occured in the past 24 hours.</p>
            <input type="text" ng-bind="tourId" />
        </div>
        <div class="center-col">
            <button class="button button-axum" type="button" ng-click="getAll()" ng-hide="load">Update</button>
        </div>
        <div class="right-col">
            <img src="/App_Plugins/Dashboards/loader.gif" ng-show="load" />
            <span ng-bind="info"></span>
        </div>
    </div>
    <div class="update-footer">
        <img src="/App_Plugins/Dashboards/logo.png" />
    </div>
</div>

AxumUpdateService.service.js

angular.module("umbraco.services").factory("AxumUpdateService", function ($http) {
    return {
        getAll: function () {
            return $http.get("/umbraco/api/Axum/GetAllGroupTours");
        }
    }
});

AxumUpdateService.controller.js

angular.module("umbraco")
    .controller("AxumUpdateService",
    function ($scope, $http, AxumUpdateService) {
        $scope.getAll = function () {
            $scope.load = true;
            console.log($scope.tourId);
            $scope.info = "Retreiving updates";
            AxumUpdateService.getAll().success(function (data) {
                $scope.result = data;
                $scope.info = data;
                $scope.load = false;
            });
        };
    });

问题是我使用 $scope.tourId 的地方，因为它似乎没有检索我输入到与 ng-bind 绑定(bind)的文本框中的任何值。如何使用 AngularJs 检索这些用户输入的值？

Answer 1

您应该使用ng-model。我认为这是一个更好的例子。

因此将您的输入字段更改为:

<input type="text" ng-model="tourId" />

您可以使用 WebAPI 传递该值