Question

我是angularJS的新手并且遇到了我的第一个大问题。首先，我想创建一个列表并对其进行更新，但它不起作用。

// index.html
<form ng-controller="ListCtrl">
    <div class="form-group">
        <input name="listname" ng-model="listname">
        <input type="button" ng-click="set()" value="add new list">
    </div>
</form>
<div ng-controller="ListCtrl">
    <ul>
        <li ng-repeat="list in lists">
            {{list.id}} - {{list.listname}}
        </li>
    </ul>
    {{output}}
</div>

有趣的部分是resetForm（），在那里我重置了表单，但也会尝试更新$ scope.output。但无论我试图改变什么，这种输出都不会改变。

// ListCtrl
var ListApp = angular.module('ListApp', []);

ListApp.controller('ListCtrl', function ($scope) {
// add new records to database
$scope.set = function() {
    $scope.createTableIfNotExists();
    $scope.insertSql = 'INSERT INTO Lists (listname) VALUES (?)';

    if ($scope.listname) {
        $scope.db.transaction(
            function (transaction) {
                transaction.executeSql($scope.insertSql, [$scope.listname], resetForm);
            }
        );
    }
};

function resetForm() {
    // clear the input field
    $scope.listname = "";
    $scope.listForm.$setPristine();
    $scope.output = 'Hello World';
    $scope.$apply();
}

修改当我尝试使用$ apply时，控制台会显示错误：

function resetForm() {
    $scope.$apply(function () {
        $scope.listname = "";
        $scope.listForm.$setPristine();
        $scope.output = 'Hello World';
    });
}

错误是：

Uncaught TypeError: undefined is not a function

错误指向＆＃34; $ scope的开头。$ apply（函数......＆＃34;

编辑2： 当我在index.html中添加一个新按钮并使用ng-click调用一个函数时，我只想说

$scope.output = 'Hello World!';

然后我的观点更新。当我使用回调来更改范围时，它只会更新。不明白这一点。我认为一切都是以angularJS连接的，特别是当我在同一个控制器中时。

编辑3： 这是plunker

Answer 1

未捕获的TypeError：undefined不是函数

那是因为您拨打了$scope.apply而不是$scope.$apply。

尝试使用回调函数调用它：

$scope.$apply(function () {
    $scope.listname = "";
    $scope.listForm.$setPristine();
    $scope.output = 'Hello World';
});

AngularJS不会更新视图

1 个答案: