为什么我的 $scope.confirmPassword 在表单提交后未定义？

Question

我正在为 AngularJS 使用 UI-Bootstrap 小部件。当我提交表单时，我的表单变量之一变得未定义。

注意：如果我删除了工具提示指令，那么$scope.confirmPassword 会被正确获取。我是 AngularJS 和 UI-Bootstrap 的新手。这是 UI-Bootstrap 中的错误吗？

另外，是否必须在 MyAppCtrl 中定义 $scope.myform 变量？如果未与工具提示指令一起定义，则不起作用。在定义$scope.myform={}; 之后，它就可以工作了！

这是我的 HTML：

<div ng-app="myApp">
<form ng-controller="MyAppCtrl">
    <input type="text" ng-model="myform.password" tooltip="Enter password" autocomplete="off" tooltip-placement="right" tooltip-trigger="focus" placholder="Enter Password" /><br/>
    <input type="text" ng-model="confirmPassword"  tooltip="Confirm Password" autocomplete="off" tooltip-placement="right" tooltip-trigger="focus" placholder="Confirm Password" /><br/>
    <button type="button" ng-click="submit()">Submit</button>
</form>

我的 JavaScript：

angular.module("myApp", ['ui.bootstrap']);

function MyAppCtrl($scope) {
    $scope.myform = {};
    $scope.submit = function () {
        alert($scope.myform.password);
        alert($scope.confirmPassword);
    }
}

请检查 jsfiddle 链接

http://jsfiddle.net/fbL5K/6/（这行得通！！）

http://jsfiddle.net/fbL5K/7/（这不是！）

Answer 1

这是 Angular js 中的一个错误。 tooltip 和 popover 将创建一个新的范围，使 ng-model 的范围丢失。

参考https://github.com/angular-ui/bootstrap/wiki/FAQ#my-input-elements-stop-working-when-i-place-a-tooltip--popover-on-it

Answer 2

您遇到了臭名昭著的“dot”ng-model 问题。要使 ng-model 正确解析，您应该始终有一个“。”在你的 ng 模型中。

Working JSFiddle Here

您需要在 MyAppCtrl 控制器中使用 $scope.myform = {} 才能在控制器范围内创建 myform 模型。这很重要，因为您希望输入子范围内的 ng-model 通过 $scope 继承解析为相同的$scope.myform。

$scope.confirmPassword 需要更改为$scope.myform.confirmPassword 以确保模型正确解析：使用 $scope 继承，它将首先解析“myform”，它将在您的 MyAppCtrl 范围内找到，然后解析“confirmPassword”模型上的属性。重要的一点是它们解析为相同的模型。

没有'.'在您的 ng-model 中，一旦您在输入文本字段中输入一个值，它将在您的子范围中创建一个范围变量，该范围变量“隐藏”控制器范围中的范围变量，有效地打破双向模型绑定.

这里有一个很好的解释：

You should always have a "dot" in ng-model

如果您在 ng-model 中没有“点”，那么您做错了。这并不完全正确，但值得遵循的好建议。