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

Question

The official tutorial is from here: https://docs.angularjs.org/guide/directive 官方教程位于此处： https : //docs.angularjs.org/guide/directive

I copied the official code from "Creating Directives", sub-header "Template-expanding directive". 我从“创建指令”的子标题“模板扩展指令”中复制了官方代码。 Example 1 works perfectly (the example where there are only script.js and index.html ), with my browser rendering the desired results. 示例1完美运行（只有script.js和index.html的示例），我的浏览器呈现了所需的结果。 Example 2 is a simple expansion of Example 1, replacing the "template" line from the directive file with a "templateUrl" line, and adding a my-customer.html file as the template. 示例2是示例1的简单扩展，将指令文件中的“ template”行替换为“ templateUrl”行，并添加了my-customer.html文件作为模板。 However, this doesn't work for me. 但是，这对我不起作用。

The copied code are as follows. 复制的代码如下。 All files are put in the same folder: 所有文件都放在同一文件夹中：

index3.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: 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: my-customer.html：

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

Why do I get a blank page when I open index3.html in my browser? 为什么在浏览器中打开index3.html时会出现空白页？

Answer 1

Fixed it by disabling cache when developer tool is on (option chosen in the js console preferences of Chrome). 通过在启用开发人员工具时禁用缓存来解决此问题（在Chrome的js控制台偏好设置中选择了该选项）。 The code was correct. 代码正确。 It wasn't rendered correctly because of cache. 由于缓存原因，它无法正确呈现。

Answer 2

index.html 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 my-customer.html

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

script.js 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'
    };
});

above code fine work in my pc.... 上面的代码在我的电脑上工作正常。

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-08-05 21:17:50

解决方案2
0

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-08-05 21:17:50

解决方案2 0

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

解决方案1
1 已采纳 2015-08-05 21:17:50

解决方案2
0