Question

我遇到问题我无法理解。服务器端我使用Node.JS和JADE生成HTML代码：

table#login-table.table.condensed
    tbody
        tr(ng-repeat="item in dailyTodoItems")
            td
                input(name="dailyTask", type="checkbox", ng-model="item.done", ng-change="todoChecked('{{item.id}}', '{{item.done}}')")
            td {{item.description}}
            td
                a(href="" ng-click="dailyTodoRemoveTask('{{item.id}}')") d

如果你看到第5行（输入字段）和最后一行（a（href ...）我使用相同的方式将我的项目与Angular绑定。问题是一个工作另一个（a（href .. 。）才不是。如您所见，我调用了两个JS函数：

$scope.todoChecked = function(id, done) {
    alert('change = ' + id);
};


$scope.dailyTodoRemoveTask = function(id) {
    alert('remove = ' + id);
};

todoChecked()按原样返回ID dailyTodoRemoveTask()返回：{{item.id}}

真正奇怪的是，当我检查代码时，浏览器ID没有看到{{item.id}}，而是两个地方的正确ID。任何帮助将不胜感激。您可以在下面看到完整的客户端JS代码：

$( document ).ready(function() {

    var messages = [];
    var socket = io.connect('http://localhost:3000');
    var field = document.getElementById("field");
    var sendButton = document.getElementById("send");
    var content = document.getElementById("content");

    socket.on('history', function (data) {
        if(data.message) {
            messages.push(data.message);
            var html = '';
            for(var i=0; i<messages.length; i++) {
                html += messages[i] + '<br />';
            }
            content.innerHTML = html;
        } else {
            console.log("There is a problem:", data);
        }
    });

    sendButton.onclick = function() {
        var text = field.value;
        socket.emit('send', { message: text, token: token });
    };

    socket.emit('send', { message: "Login: " + token });

});

//
// Allegro
//

var AllegroApp = angular.module('Allegro', []);

AllegroApp.controller('dailyTodoController', function($scope, $http) {

    // Model

    $scope.dailyTodoItems = [];
    $scope.newDailyTodoItem = '';



        // Load daily todo items
        $http({
            method: 'POST',
            url: "/todo/get/12",
            data: {tkn: token}

        }).success(function(data, status) {
            // Push the data to the Model
            for (var i = 0; i < data.result.length; i++) {

                $scope.dailyTodoItems.push({
                    description: data.result[i].task,
                    done: data.result[i].done,
                    id: data.result[i]._id
                });
            }

        }).error(function(data, status) {
            // TODO handle error gracefully
            alert('Technical error: Could not save new daily todo task. Please try again :-( ');
        });




    // Events

    $scope.addDailyTodoItem = function() {
        // Check for empty input
        if ($scope.newDailyTodoItem.length < 1) { return; }


        // Update the database
        $http({
            method: 'POST',
            url: "/todo/new/" + $scope.newDailyTodoItem,
            data: {tkn: token}

        }).success(function(data, status) {
            // Push the data to the Model
            $scope.dailyTodoItems.push({
                description: $scope.newDailyTodoItem,
                done: false,
                id: data.id
            });

        }).error(function(data, status) {
            // TODO handle error gracefully
            alert('Technical error: Could not save new daily todo task. Please try again :-( ');
        });
    };


    $scope.todoChecked = function(id, done) {
        alert('change = ' + id);
        if (done == 'true') { var newStatus = 'false' } else newStatus = 'true';
        $http({
            method: 'POST',
            url: '/todo/update/' + id + '/' + newStatus,
            data: {tkn: token}
        }).success(function(data, status) {
            // UI already updated. No need to do anything
        }).error(function(data, status) {
            // TODO handle error gracefully
            alert('Technical error: Could not update task status. Please try again :-( ');
        });
    };


    $scope.dailyTodoRemoveTask = function(id) {
        alert('remove = ' + id);
    };


    $scope.todoLoadTodaysTasks = function() {

    };

});

Answer 1

通常，您不必在指令中插入模型值。请检查此代码。

table#login-table.table.condensed
    tbody
        tr(ng-repeat="item in dailyTodoItems")
            td
                input(name="dailyTask", type="checkbox", ng-model="item.done", ng-change="todoChecked(item.id, item.done)")
            td {{item.description}}
            td
                a(href="" ng-click="dailyTodoRemoveTask(item.id)") d

使用Angular渲染问题

1 个答案: