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

Question

我有一个带有输入文本字段的简单视图，用户在其中输入他的姓名，控制器必须检索该值并分配给 employeeDescription 变量。问题是 ng-model 值（来自输入）没有到达控制器，我只是尝试像 Radim Köhler 解释的那样使用 $watch 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);

Answer 1

您的代码应该会失败，因为控制器中的 'name' 变量从未定义。您在代码中定义了两个变量：$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);
    });
});

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

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

javascript

model-view-controller

angularjs