AngularJS issue with templateURL

Question

i have started to study Angular just a little time. I am trying to write an example of Custome Directive with TemplateURL. The problem is that in the new custom tag it's not print the result of the template.

To this link you can see the code.
Index.html

<!doctype html>
<html  xmlns="http://www.w3.org/1999/xhtml" lang="it-IT">

<head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello Angular</title>
     <script src="../../angular.min.js"></script>
     <script type="text/javascript" src="script.js"></script>
</head>
    <body ng-app="myApp" ng-controller="controApp as ctrl">


        <table border=2>
            <thead>
                <td>AAA</td>
                <td>BBB</td>
                <td>CCC</td>
            </thead>
            <tbody>
                <lista-clienti lista="ctrl.elencoClienti"></lista-clienti>
            </tbody>
        </table>

    </body>
</html>

script.js

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

app.directive("listaClienti", function() { 
    return { 
      scope: {
        lista : "="
      },
      //template: "<div>missing tpl</div>"
      templateURL: "selectCity.html"
    }; 
  }); 

app.controller('controApp',  function($scope ){

  $scope.elencoClienti  = [ 
        {codiceCliente: "1", ragioneSociale: "Michele Srl", indirizzo_so:"Via delle calende greche" },
        {codiceCliente: "2", ragioneSociale: "Michele Srl", indirizzo_so:"Via delle calende greche" },
    ]; 


});

selectCity.html

<tr ng-repeat="c in lista">
    <td>{{c.codiceCliente}}</td>
    <td>{{c.ragioneSociale}}</td>
    <td>{{c.indirizzo_so}}</td>
</tr>

what could is the problem? Thanks

Directory Structure: 05_Custom_Directive
-- Example_02
----index.html
----script.js
----selectCity.html

Will you paste the directory structure of your application, my hunch is your selectCity.html is not being found by the directive. — gh9
– gh9, Commented Apr 11, 2016 at 13:26
can you change your selectCity.html to be the below <tr ng-repeat="c in lista"> <td>{{c.codiceCliente}}</td> <td>{{c.ragioneSociale}}</td> <td>{{c.indirizzo_so}}</td> </tr> this i a test This will tell us if your template is getting injected or not. — gh9
– gh9, Commented Apr 11, 2016 at 13:51
nothing, don't work...I also think it is a problem of injection — vecio88
– vecio88, Commented Apr 11, 2016 at 13:54

Walfrat · Accepted Answer · 2016-04-11 13:28:40Z

2

When using ctrlAs syntax use this instead of $scope

 this.elencoClienti  = [ 
    {codiceCliente: "1", ragioneSociale: "Michele Srl", indirizzo_so:"Via delle calende greche" },
    {codiceCliente: "2", ragioneSociale: "Michele Srl", indirizzo_so:"Via delle calende greche" },
];

answered Apr 11, 2016 at 13:28

Walfrat

5,3941 gold badge18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gh9 Over a year ago

docs.angularjs.org/api/ng/directive/ngController, this is the url that suggests to bind your properties to the object instead of the $scope when you are using the as clause in ng-controller.

vecio88 Over a year ago

ah perfect i don't know this alternative

Collectives™ on Stack Overflow

AngularJS issue with templateURL

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related