Question

我正在学习AngularJS，而我正试图制作一个todo应用。一切都很好，除了当我试图添加一个新的待办事项时，以前的待办事项也会改变。我认为这是因为$scope在整个页面中改变了它的值，我想仅在最后生成的待办事项中对其进行更新。也许我的代码出于此目的是错的，我刚刚开始学习AngularJS。

希望你能帮助我，这是我的代码：

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function ($routeProvider) {

    $routeProvider

    .when('/', {
        templateUrl: 'pages/main.html', 
        controller: 'mainController'
    })

    .when('/todo', {
        templateUrl: 'pages/todo.html',
        controller: 'subController'
     })

});

myApp.controller('mainController', ['$scope', function($scope){


}]);

myApp.controller('subController', ['$scope', '$compile', function($scope, $compile){

    $scope.getMsg = function(){ 

        $scope.todoHeader = $('#header').val();
        $scope.todoMsg = $('#msg').val();

        var item = $compile("<todo-item todo-Title='{{todoHeader}}' todo-message='{{ todoMsg }}'></todo-item>")($scope);
        $(".list-group").append(item);

    }
}]);

myApp.directive('todoItem', function(){
    return {
        templateUrl: 'directives/todoItem.html',
        scope: {
            todoTitle: "@",
            todoMessage: "@"
        }
    };
});

<h3>Todo Page</h3>

<div style="margin:auto;margin-bottom: 10px;display:table;">
    <input type="text" id="header" placeholder="Enter todo header" style="margin-right:10px;padding:5px;"><br>
    <textarea type="text" id="msg" placeholder="Enter todo message" style="margin-right:10px;padding:5px;"></textarea><br>
    <button type="button" class="btn btn-primary" ng-click="getMsg()">Add Todo</button>
</div>

<div class="list-group" style="margin: auto; display: table;">
</div>

这是指令（todoItem.html）代码：

<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style="width:600px">
<div class="d-flex w-100 justify-content-between">
    <h1 class="mb-1">{{ todoTitle }}</h1> 
</div>
<p class="mb-1">{{ todoMessage }}</p>

Answer 1

确实在您的getMsg函数中，您始终覆盖相同的$scope todoHeader和todoMessage变量。

这是$scope中变量的默认行为，如果在$scope中声明的变量将在整个应用程序中共享，那么它会改变它会影响所有它在页面中的出现。

<强>解决方案：

我认为您应该将todos存储在范围内的数组中，每次都将todo项目放入其中，或者只将todoHeader和todoMessage两个getMsg置于您的{ {1}}功能并在新的HTML待办事项中使用它们。

这就是你的代码：

//If you wanted to store the todos in an array
$scope.todos = [];

$scope.getMsg = function() {

    var todoHeader = $('#header').val();
    var todoMsg = $('#msg').val();

    //or if you want to store the todos in an array
    $scope.todos.push({
        todoHeader: todoHeader,
        todoMessage: todoMessage
    });

    var item = $compile("<todo-item todo-Title='+todoHeader+' todo-message='+todoMessage+'></todo-item>")($scope);
    $(".list-group").append(item);
}

为什么$ scope改变整个页面的值？

1 个答案: