Directive not loading in angular view
Question
I am a newbie to angular. I have an index.html file and controller.js file as follows `
<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>
` And this is 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'
};
});
I am trying to add a directive template from file test.html with markup
<h1>Hi</h1>
But its not loading in the browser .I am getting error Error: $compile:tpload Error Loading Template in the browser console.
Can you please tell what I am missing here?
1 answers
solution1
0 ACCPTED 2017-06-20 08:21:38
Looks like its a browser issue,It was not working in chrome and internet explorer.I tried the same code with Mozilla Firefox and it worked.
Thanks everyone for your suggestions.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.