CODEWITHSUNDEEP
angularjsangularjs-directive
Renganathan M G
Renganathan M G

Reputation: 5209

Angular Directives : How to change "template as function" to "templateUrl"?

I am new to AngularJS. I am trying to modify one of the directives

Current code:

template:   function(tElement, tAttrs){
      return  "<div ..........>"+
               "<div>"

I want to change like:

templateUrl: 'some.html'

Note: I have copied the HTML part code from the template and created file called 'some.html' but it's not working.

What am I missing?

Upvotes: 0

Views: 232

Answers (2)

Keshan Nageswaran
Keshan Nageswaran

Reputation: 8178

  1. Make sure you return a valid json object in the return of the directive

  2. Make sure you have only one root element of your html content - that is template like this - 

    <div>...</div>
<div>...</div>

is not allowed you need to have one root element like this - 

<div>
    <div>...</div>
    <div>...</div>
</div>
  1. To have scope values need to be set to the html content use link and make it available.

Below is a complete simple example of a directive and its html

   myTestApp.directive('directive', function(configuration) {
      return {
        restrict: 'E',
        templateUrl: 'myContactTemplate.html',
        link: function(scope, element, attrs) {
          scope.config = configuration;
        }
      };
    });

HTML

<div>{{config.name}}<br>Version: {{config.age}}</div>

Upvotes: 1

Jef
Jef

Reputation: 350

Unless I'm mistaken, you need to return an object, like so:

return {
        templateUrl: 'some.html'
    }

As long as your file path is correct then you should be good to go.

Upvotes: 1

Related Questions