Question

官方教程来自： https://docs.angularjs.org/guide/directive

我从“创建指令”，子标题“模板扩展指令”中复制了官方代码。示例1完美地工作（仅有script.js和index.html）的示例，我的浏览器呈现所需的结果。示例2是示例1的简单扩展，使用“templateUrl”行替换指令文件中的“模板”行，并添加my-customer.html文件作为模板。但是，这对我不起作用。

复制的代码如下。所有文件都放在同一个文件夹中：

index3.html：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example - example-example12-production</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js">      </script>
    <script src="script3.js"></script>   
</head>
<body ng-app="docsTemplateUrlDirective">
    <div ng-controller="Controller">
    <div my-customer></div>
    </div>
</body>
</html>

script3.js：

angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', function($scope) {
    $scope.customer = {
         name: 'Naomi',
         address: '1600 Amphitheatre'
    };
 }])
.directive('myCustomer', function() {
    return {
        templateUrl: 'my-customer.html'
    };
});

MY-customer.html：

Name: {{customer.name}} Address: {{customer.address}}

为什么我在浏览器中打开index3.html时会出现空白页？

Answer 1

通过在开发人员工具启用时禁用缓存（在Chrome的js控制台首选项中选择选项）来修复此问题。代码是正确的。由于缓存，它无法正确呈现。

Answer 2

的index.html

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="script.js"></script>

<body ng-app="docsTemplateUrlDirective">
    <div ng-controller="Controller">
        <div my-customer></div>
    </div>
</body>

MY-customer.html

Name: {{customer.name}} Address: {{customer.address}}

的script.js

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

app.controller('Controller', ['$scope', function($scope) {
    $scope.customer = {
        name: 'Naomi',
        address: '1600 Amphitheatre'
    };
}]);

app.directive('myCustomer', function() {
    return {
        templateUrl: 'my-customer.html'
    };
});

以上代码在我的电脑上做得很好....

AngularJs指令：从官方教程逐字复制代码，但它不起作用。为什么？

2 个答案: