指令不在角度视图中加载

时间:2017-06-20 07:01:51

标签: javascript angularjs

我是棱角分明的新手。 我有一个index.html文件和controller.js文件,如下所示 `

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <script src="controller.js"></script>

</head>

<body ng-app="testApp">

  <div ng-controller="appCtrl">
    Sample 1 :a ={{a}}</br>
    Sample 1:b ={{b}}</br>
    <input ng-model="a">
    <hr>
    <div ng-controller="childCtrl">
      Sample 2: a ={{a}}</br>
      <input ng-model="a"></br>
      Sample 2 :b ={{b}}</br>
      Sample 2: c ={{c}}</br>
      Sample 2 :d ={{d}}</br>
      <hr>
    </div>
    <div message></div>
  </div>

</body>

</html>

` 这是controller.js

    var app = angular.module("testApp", []);

app.controller("appCtrl", function($scope) {

  $scope.a = 10;
  $scope.b = 20;
});



 app.controller("childCtrl", function($scope) {

  $scope.c = 30;
  $scope.d = 40;
});
    app.directive("message", function() {
      return {
        templateUrl: 'test.html',
        restrict: 'A'
      };
    });

我正在尝试使用标记

从文件test.html添加指令模板
  <h1>Hi</h1>

但它没有在浏览器中加载。我收到错误错误:$ compile:tpload 在浏览器控制台中加载模板时出错。

你能告诉我这里缺少什么吗?

1 个答案:

答案 0 :(得分:0)

看起来像是一个浏览器问题,它在chrome和Internet explorer中没有用。我在Mozilla Firefox上尝试了相同的代码并且它有效。

感谢大家的建议。