0

I will use the $templateCache script tag to show my html view. Currently I have ,

<body ng-app="myApp">
    <div ng-controller="myAppController">
    ....
    ....
    <div class="col-xs-12">
        <my-settings></my-settings>
    </div>

..
..
    </div>

And my app.js,

var myApp = angular.module('myApp', ['editor']);

myApp.config(['$httpProvider', function($httpProvider) {
 ....
 ....
}]);

myApp.controller('myAppController', ['$scope', '$http', '$rootScope', function ($scope, $http,$rootScope) {
//Other stuff
}

directive.js

'use strict';

angular.module('editor').directive("my-settings", function() {
    return {
        templateUrl: '/views/templateId.html'
    };
});

I want to use $templateCache via the script tag or as a service.But while adding this via service, I have to put all my html element in $templateCache.put().

var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
  $templateCache.put('templateId.html', 'This is the content of the template');
});

Now I think, I will use the script tag instead.

<script type="text/ng-template" id="templateId.html">
  <p>This is the content of the template</p>
</script>

From the documentation, it must be a descendent of the $rootElement. So where I have to place the script.Will this be included inside <body ng-app="myApp"> in the same file itself?

Nidheesh
  • 4,390
  • 29
  • 87
  • 150

1 Answers1

1

You need to use camel casing while defining the name for the directive:

.directive("mySettings" ...

Also, you can define the inline template in the same scope as of the directive, like this:

<div ng-controller="myAppController">
    ....
    ....
    <div class="col-xs-12">
        <my-settings></my-settings>
    </div>

..
..
    <script type="text/ng-template" id="templateId.html">
      <p>This is the content of the template</p>
    </script>
  </div>

Just ensure that the ID of inline template matches the templateUrl. You can check out a working fiddle here.

31piy
  • 23,323
  • 6
  • 47
  • 67
  • Thankss.. I will check..Also I have multiple scripts. So can I put all together in a single file somewhere outside the main html file? Then How can I make the call? – Nidheesh Nov 30 '17 at 10:24
  • @ep -- `templateUrl` has to be a valid template identifier. It can either be the ID of inline template or it can be an http URL. AngularJS automatically fetches the contents and stores it in `$templateCache`, generally. – 31piy Nov 30 '17 at 10:49
  • One more question: If I have .. should I keep the script same way? – Nidheesh Nov 30 '17 at 13:39