Question

我有这个页面：

<!DOCTYPE html>
<html>
    <body ng-app='vb'>
        <div id="loadedContent" ng-controller="ExampleController"></div>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript">
            var app = angular.module('vb', ['ngRoute']);
            angular.module('vb', []).controller('ExampleController', ['$scope', function($scope) {}]);    

            jQuery(function () {
                jQuery.get('vb.txt', {
                    now: jQuery.now()
                }, function (data) {
                    $("#loadedContent").append(data);
                });
            });
        </script>
    </body>
</html>

Plunker

页面的作用是加载一个包含{{10*10}}的文本文件，并将其放在loadedContent div标签中，但不编译Angular JS代码。我是Angular JS的新手。我已经阅读了文档，并尝试了ng-bind, ng-include, compile指令，但似乎都没有。这是怎么回事？

Answer 1

你根本不需要使用jquery来做这件事。

如果您想从外部文件加载数据，则可以使用ng-include指令加载外部html。

<ng-include src="'vb.html'"></ng-include>

或使用属性语法（如果您的目标是无法处理自定义元素的浏览器）

<div ng-include="'vb.html'"></div>

会将文件加载到您放置的位置。注意src属性中的额外引号，这是必需的。否则，您可以直接将绑定（{{10 * 10}}）放在控制器元素中，然后编译。您还可以在控制器函数中将变量设置为$ scope并使用：

$scope.ten = 10;

与

{{ten*ten}}

在控制器元素内。

我建议你在开始之前阅读angular tutorial，因为这是一个以角度开始的好地方。

至于为什么你的例子不起作用，我认为这是因为角色的编译阶段在jQuery将文本添加到页面之前开始和完成。 Angular并不能很好地与其控制之外的东西混合，但它确实包含了创建完整Web应用程序所需的一切。

Answer 2

通常，任何DOM操作代码都会放在一个指令中。但是，指令还内置了检索模板的方法，这些模板也将自动编译。

虽然我同意@CoreyGrant ng-include非常适合您的用例，但创建指令也非常简单

加载文件的示例：

angular.module('vb').directive('myText', function(){
  return{
    templateUrl:'vb.txt'
  }
});

HTML

<my-text></my-text>

如果你打算使用棱角分明，你需要了解指令的力量

的 DEMO

Answer 3

<script type="text/javascript">

var app = angular.module('vb', ['ngRoute']);
angular.module('vb', []).controller('ExampleController', ['$scope', function($scope) {

   $scope.myData;

   jQuery.get('vb.txt', {
            now: jQuery.now()
         }, function (data) {
            $scope.myData = data;
         });

}]);

</script>

angular js加载文件并将内容放在div中

3 个答案: