Angular 的渲染问题答案

【问题标题】：Render issue with AngularAngular 的渲染问题
【发布时间】：2014-09-14 08:01:02
【问题描述】：

我正面临一个无法解决问题的问题。服务器端我使用 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() {

    };

});

【问题讨论】：

标签： javascript angularjs binding ng-repeat

【解决方案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

【讨论】：