如何将 ng-model 值检索到 AngularJS 中的控制器答案

【问题标题】：How to retrieve the ng-model value to a controller in AngularJS如何将 ng-model 值检索到 AngularJS 中的控制器
【发布时间】：2015-01-27 18:06:44
【问题描述】：

我有一个带有输入文本字段的简单视图，用户在其中输入他的姓名，控制器必须检索该值并分配给employeeDescription 变量。问题是 ng-model 值（来自输入）没有到达控制器，我只是尝试使用 $watch 像 Radim Köhler 解释 Cannot get model value in controller method in angular js 但不起作用。我只是觉得它一定很简单。

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

index.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>

app.js

(function(angular) {
    var myAppModule = angular.module('angularApp', []);

    myAppModule.controller('nameController', function($scope) {
        $scope.employeeDescription = name;
    });

})(window.angular);

【问题讨论】：

你不能 2 路绑定原语。这就是为什么你应该总是在ng-model 中有一个点，这意味着你正在使用一个对象来绑定

标签： javascript angularjs model-view-controller

【解决方案1】：

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

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

<div>
    Name <input type="text" ng-model='employeeDescription' />
</div>

myAppModule.controller('nameController', function($scope) {
    $scope.$watch('employeeDescription', function() {
        console.log($scope.employeeDescription);
    });
});

【讨论】：

但是，如果我想在控制器中使用该变量构建字符串消息，我该如何检索该值？
用观察者更新了答案以检查employeeDescription并对其进行处理，在这种情况下，记录它;）我建议在输入中添加一个ng-blur并处理你的字符串函数在那里调用，所以一旦用户完成编辑，你就可以编辑字符串；）