AngularJs指令：從官方教程中逐字復制了代碼，它不起作用。為什么？

Question

官方教程位於此處： https : //docs.angularjs.org/guide/directive

我從“創建指令”的子標題“模板擴展指令”中復制了官方代碼。 示例1完美運行（只有script.js和index.html的示例），我的瀏覽器呈現了所需的結果。 示例2是示例1的簡單擴展，將指令文件中的“ template”行替換為“ 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 個解決方案

解決方案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