AngularJS如何在控制器中获取input[text]的值（数据变更时）

嘿，针对你想在AngularJS控制器里拿到input文本框数据变更后的值的需求，我结合你给出的代码片段整理了几种实用的实现方式，一起来看看：

方法1：用ng-model+ng-change（最省心的原生方案） #

AngularJS的核心就是双向数据绑定，直接用ng-model绑定input的值，再搭配ng-change监听变化，一旦内容更新就自动触发控制器里的方法获取最新值，完全不用手动操作DOM。

完整代码示例：

(function () {
    'use strict';

    var app = angular.module('app', ['ngMaterial']);

    app.controller('ScanDataCtrl', function ($scope) {
        // 初始化绑定的变量，用来存input的值
        $scope.scanData = '';

        // 当input值变化时触发的方法
        $scope.onScanDataChanged = function () {
            console.log('当前扫描数据：', $scope.scanData);
            // 这里可以加你需要的业务逻辑，比如提交数据之类的
        };
    });
})();

对应的HTML模板：

<div ng-controller="ScanDataCtrl">
    <input type="text" 
           ng-model="scanData" 
           ng-change="onScanDataChanged()"
           placeholder="扫描或输入数据">
</div>

方法2：结合你现有的自定义指令实现 #

如果你需要保留自己写的scanDataBScan指令，那可以在指令里监听input的输入事件，然后把DOM的值同步到控制器的作用域中。这里要注意，原生DOM事件里修改scope后要手动触发脏检查，不然AngularJS不会感知到变化。

完善后的指令代码：

(function () {
    'use strict';

    var app = angular.module('app', ['ngMaterial']);

    app.controller('ScanDataCtrl', function ($scope) {
        $scope.scanData = '';

        $scope.getScannedData = function () {
            console.log('当前扫描数据：', $scope.scanData);
        };
    });

    app.directive('scanDataBScan', function ($mdDialog, $sce, $http) {
        return {
            restrict: 'C',
            link: function (scope, element, attrs) {
                // 监听input的实时输入事件
                element.on('input', function () {
                    // 把input的当前值同步到scope变量
                    scope.scanData = element.val();
                    // 用$apply触发脏检查，确保控制器能拿到最新值
                    scope.$apply(function () {
                        scope.getScannedData();
                    });
                });

                // 保留你原来的点击逻辑（注意你之前的方法名拼写错了，应该是getScannedData）
                element.on('click', function () {
                    scope.$apply(function () {
                        scope.getScannedData();
                    });
                });
            }
        };
    });
})();

对应的HTML：

<div ng-controller="ScanDataCtrl">
    <input type="text" 
           class="scanDataBScan" 
           ng-model="scanData"
           placeholder="扫描或输入数据">
</div>

几个小提醒 #

• 要是在原生DOM事件（比如element.on）里修改$scope，一定要用$scope.$apply()或者$scope.$digest()触发脏检查，不然控制器和视图的数据不会同步。
• 你原来的代码里指令的点击事件调用的scope.getScanne...是拼写错误，得改成scope.getScannedData()才行。
• 优先用AngularJS内置的指令，这更符合框架的设计思路，也能减少自定义代码的维护成本哦。

内容的提问来源于stack exchange，提问作者munyso