如何在 AngularJS 中将 ng-model 值检索到控制器

How to retrieve the ng-model value to a controller in AngularJS

本文关键字：检索 控制器 ng-model 中将 AngularJS      更新时间：2023-09-26

我有一个简单的视图，其中包含一个输入文本字段，用户在其中输入他的名字，控制器必须检索分配给employeeDescription变量的值。问题是 ng 模型值（来自输入）没有到达控制器，我只是尝试使用像 Radim Köhler 解释的那样$watch无法在 angular js 中的控制器方法中获取模型值，但不起作用。我只是认为它必须很简单。

也可以尝试从$scope中检索name变量（ng 模型），例如$scope.employeeDescription = $scope.name;但不检索值，并且 Google chrome 控制台没有给我任何输出。有什么解决办法吗？

索引.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body ng-app='angularApp'>
    <div ng-controller='nameController'>
        <div>
            Name <input type="text" ng-model='name' />
        </div>
        Welcome {{employeeDescription}}
    </div>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

应用.js

(function(angular) {
    var myAppModule = angular.module('angularApp', []);
    myAppModule.controller('nameController', function($scope) {
        $scope.employeeDescription = name;
    });
})(window.angular);

您的代码应该失败，因为控制器中的"name"变量从未定义过。代码中定义了两个变量：$scope.employeeDescription 和 $scope.name（在输入的 ng 模型中定义）。请注意，定义的是"$scope.name"，而不是"名称"。

我的建议是只留下一个变量：

<div>
    Name <input type="text" ng-model='employeeDescription' />
</div>
myAppModule.controller('nameController', function($scope) {
    $scope.$watch('employeeDescription', function() {
        console.log($scope.employeeDescription);
    });
});
相关文章：