Question

我有一个非常简单的Angular应用程序，包括工厂和控制器。工厂成功提供数据，控制器成功调用数据并对其采取措施。当我尝试将数据附加到视图中时会发生此问题。使用下面的代码，我收到以下错误：

＆＃34;错误：Node.appendChild的参数1不是对象。＆＃34;

app.js

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

        myModule.factory('loanRepository', function(){
            return {
                getAllloans: function() {
                    return [
                        { LoanID: '1', LoanName: '101 Sample', LoanAmount: '1000000'},
                        { LoanID: '2', LoanName: '201 Sample', LoanAmount: '150000000'},
                    ];
                }
            };
        });

        myModule.controller('overview', function($scope, $compile, loanRepository){
            $scope.loans = loanRepository.getAllloans();

            $scope.compileOverview = function(){

                $scope.loanOverviewHTML = '';

                angular.forEach($scope.loans, function(loanDetails,loan){
                    $scope.loanOverviewHTML += '<a ng-click="reviewLoan(' + loanDetails.LoanID +')">' + loanDetails.LoanName + '</a>';
                });

                var overviewHTML = $compile($scope.loanOverviewHTML);
                angular.element(document.getElementById("overview")).append(overviewHTML);
            }

        });

的index.html

<body ng-app="myModule" ng-controller="overview" ng-init="compileOverview()">
    <div id="overview">

    </div>
</body>

预期的结果是控制器会将编译后的HTML附加到视图中，并给出：

<body ng-app="myModule" ng-controller="overview" ng-init="compileOverview()">
    <div id="overview">
        <a ng-click="reviewLoan(1)">101 Sample</a>
        <a ng-click="reviewLoan(2)">201 Sample</a>
    </div>
</body>

我不知道为什么我会因为＆appendChild＆＃39;而收到错误。因为我正在使用＆＃39;追加＆＃39;只要。很想知道我为什么会收到这个错误以及为什么HTML没有被注入DOM。

Answer 1

正如我在评论中提到的，您可以根据$compile简单地使用ng-repeat来根据需要呈现尽可能多的html来避免所有$scope.loans调用。

<div id="overview" ng-repeat="loan in loans">
    <a ng-click="reviewLoan(loan.LoanID)">{{loan.LoanName}}</a>
</div>

您希望尽可能避免使用$ compile，特别是如果您希望将应用程序移植到Angular2，因为它不存在。如果你必须使用$ compile，它应该总是在一个指令中完成，而不是一个控制器。但是，在这种情况下，这是不必要的，因为我们可以允许Angular为我们处理它。

为什么在尝试在AngularJS中附加HTML时出现错误？

1 个答案: