Question

阅读之后我明白通过ajax加载的html并没有绑定到我的角度应用程序。我已经尝试了1000件但却无法让'customers-invoice.html'了解角度。任何想法将不胜感激。

<body ng-cloak ng-app="myApp">
    <main id="main">
        <div ng-controller='Ctrl'>
            <a ng-click="openInvoice(data.invoiceRef)" class="btn">View</a>
        </div>
    </div>
</body>


var app = angular.module('myApp', []);
app.controller('Ctrl', function($scope, $compile) {
    $scope.invoice = {}
    $scope.openInvoice = function(ref) { 
        $scope.invoice.ref = ref;
        var html = $('#main');
        html.load('customers-invoice.html')
        $compile(html)($scope);          
    }
}

Answer 1

在这种情况下，您可以使用ng-include指令，它会在指定的DOM中加载html，并为您准备好已编译的DOM绑定。但是，由于您想要绑定Ctrl控制器，您必须将该DOM放在Ctrl控制器div

中

<body ng-cloak ng-app="myApp">
    <main id="main">
        <div ng-controller='Ctrl'>
            <a ng-click="openInvoice(data.invoiceRef)" class="btn">View</a>
            <div ng-include="templateUrl"></div>
        </div>

    </div>
</body>

<强>代码

$scope.openInvoice = function(ref) { 
    $scope.invoice.ref = ref;
    $scope.templateUrl = 'customers-invoice.html';     
}

Answer 2

您可以使用$templateCache服务将html文件加载到控制器，因为模板已经加载到缓存中。

 var app = angular.module('myApp', []);
 app.controller('Ctrl', function($scope, $compile, $templateRequest, $sce) {
     $scope.invoice = {}
     $scope.openInvoice = function(ref) {
         var templateUrl = $sce.getTrustedResourceUrl('customers-invoice.html');

         $templateRequest(templateUrl).then(function(template) {
             $compile($("#main").html(template).contents())($scope);
         });
     }
 })

Answer 3

我终于收到了不满和更好的问题并相应地解决了问题。因为我们正在执行Angular知识之外的代码，所以我们需要编译插入的html来查看Angular，然后手动调用$ scope。$ digest（）来更新标记。

所以这就是诀窍：

$编译（$（ '＃idWhereIloadedContent'）内容（）。）（$范围）;

$ $范围摘要（）;

Answer 4

我现在有一个更好的解决方案！而不是使用$ .ajax，只需使用$ http（我想它会在后台为您运行摘要循环）。无论如何，问题解决了！

这是angulajs页面的链接，该链接解释了如何使用$ http https://docs.angularjs.org/api/ng/service/ $ http

AngularJS在ajax load（）函数之后将范围绑定到html

4 个答案: