gpt4 book ai didi

angularjs - 为什么我在尝试在 AngularJS 中附加 HTML 时收到错误?

转载 作者:行者123 更新时间:2023-12-02 23:31:19 25 4
gpt4 key购买 nike

我有非常简单的 Angular 应用程序,其中包括一个工厂和一个 Controller 。工厂成功提供数据, Controller 成功调用数据并对其采取操作。当我尝试将数据附加到 View 中时会出现问题。使用下面的代码,我收到以下错误:

“错误:Node.appendChild 的参数 1 不是对象。”

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>

预期的结果是 Controller 会将编译后的 HTML 附加到 View 中,给出:

<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”错误,因为我只使用“append”。很想知道为什么我会收到此错误以及为什么 HTML 没有被注入(inject)到 DOM 中。

最佳答案

正如我在评论中提到的,您可以根据 $ 只需使用 ng-repeat 根据需要渲染尽可能多或尽可能少的 html,从而避免所有 $compile 调用范围.贷款.

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

您希望尽可能避免 $compile,特别是如果您希望将应用程序移植到 Angular2,因为那里不存在它。如果您必须使用 $compile,它应该始终在指令中完成,而不是在 Controller 中完成。但是,在本例中这不是必需的,因为我们可以让 Angular 为我们处理它。

关于angularjs - 为什么我在尝试在 AngularJS 中附加 HTML 时收到错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36225724/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com