Question

Angular.js存在这个我无法解决的问题。这是我简单的html：

<html ng-app="myAngularapp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="myangular.js"></script>
  </head>
  <body>
    <div ng-controller="myAngularCtrl">
<form ng-submit="addingName()">
        <input type="text" ng-model="myAngular.newname"  size="30"
               placeholder="add new todo here">
        <input class="btn-primary" type="submit" value="add">
      </form>
</div>
  </body>
  </html>

和myangular.js：

angular.module("myAngularapp",[])
    .controller("myAngularCtrl", function($scope){
        $scope.myNames = [
            {name:"aaa"},
            {name:"aaa"},
            {name:"aaa"}
        ];

        $scope.addingName = function(){
            $scope.myNames.push({name:newname});
        }
    });

当我按下提交按钮时，出现错误：

错误：无法找到变量：newname

什么似乎是问题？

Answer 1

您从未声明newname，而是$scope

上的属性

<input type="text" ng-model="myAngular.newname"  size="30">

可以通过控制器中的$scope.myAngular.newname访问，而不是newname。

$scope.myNames.push({name: $scope.myAngular.newname});

这是因为angular存储了$scope中HTML可以访问的变量。这是一个可以在控制器内访问的对象，使其独一无二。

Answer 2

您可以访问控制器中的myAngular.newname：

$scope.myAngular.newname

或另一种选择是向addingName添加一个参数：

$scope.addingName = function(newname){//ur code};

然后更改HTML：

ng-submit="addingName(myAngular.newname)"

Answer 3

在你的html中，你将你的输入绑定到一个名为myAngular.newname的模型但是当您将此值添加到数组myNames时，您使用的是变量newname。

您可以在视图中或控制器中更改变量名称。这取决于你。

解决问题的一个方法是：

<input type="text" ng-model="myAngular.newname"  size="30"
               placeholder="add new todo here">

Answer 4

你可以使用

this.myAngular.newname

在提交表单后获取文本框的值

http://plnkr.co/edit/6P5LXuuTAfUfQS4RxmWG?p=preview

Answer 5

作为最佳实践：ViewModel应该非常清晰地定义。

始终使用Controller As语法并避免使用$ scope。

<form ng-submit="addingName()">
    <input type="text" ng-model="myAngular.newname"  size="30"
                   placeholder="add new todo here">
    <input class="btn-primary" type="submit" value="add">
</form>

当您使用myAngular.newname时，应该在VM上声明它（在您的情况下为$scope）。并在addingName函数

中传递newname的参数

所以，你的JS将是：

angular.module("myAngularapp",[])
    .controller("myAngularCtrl", function($scope){
        $scope.myNames = [
            {name:"aaa"},
            {name:"aaa"},
            {name:"aaa"}
        ];

        //or you may use without myAngular
        //$scope.newname = "";
        //in this case you will have to use: ng-model="newname"
        //                        instead of ng-model="myAngular.newname"
        $scope.myAngular = {
            newname: ""
        };

        $scope.addingName = addName;

        //you can use addName function even to add names from JS itself also
        function addName(name){
            $scope.myNames.push({name});
        }
    });

并且视图将是：

<form ng-submit="addingName(myAngular.newname)">
    <input type="text" ng-model="myAngular.newname"  size="30"
                   placeholder="add new todo here">
    <input class="btn-primary" type="submit" value="add">
</form>

PS ：我无法添加评论，因此将所有最佳做法列为单独答案。

Angularjs - 未找到变量

5 个答案: