Question

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

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

此外，是否必须在$scope.myform中定义MyAppCtrl变量？如果没有与tooltip指令一起定义则不起作用。定义$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

这是角js中的错误。工具提示和弹出框将创建一个新的范围，使ng模型的范围丢失。

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

Answer 2

你正在遇到臭名昭着的＆＃34; dot＆＃34; ng-model问题。为了正确解决ng-model，你应该总是有一个＆＃34;。＆＃34;在您的ng模型中。

Working JSFiddle Here

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

$scope.confirmPassword需要更改为$scope.myform.confirmPassword以确保模型正确解析：使用$ scope继承，它将解析＆＃39; myform＆＃39;首先，它将在您的MyAppCtrl范围内找到，然后解析＆＃39; confirmPassword＆＃39;模特的财产。重要的是，他们决心采用相同的模式。

没有＆＃39;。＆＃39;在你的ng模型中，一旦你在输入文本字段中输入一个值，它就会在你的子范围中创建一个范围变量＆＃34; shadow＆＃34;控制器范围内的范围变量，有效地打破了双向模型绑定。

这里有一个很好的解释：

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

如果你没有＆＃34; dot＆＃34;在ng-model中，你做错了。这不是严格意义上的，但要提出好的建议。

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

2 个答案: