与templateURL的AngularJS问题

时间:2016-04-11 13:23:11

标签: javascript angularjs

我已经开始研究Angular一段时间了。我试图用TemplateURL编写一个Custome Directive的例子。问题是在新的自定义标记中,它不会打印模板的结果。

通过此链接,您可以看到代码 的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>

可能是什么问题? 感谢

目录结构: 05_Custom_Directive
- 例子_02
---- index.html的
----的script.js
---- selectCity.html

1 个答案:

答案 0 :(得分:2)

使用ctrlAs语法时,请使用此代替$ scope

<input type="text" name="id" value="" />
<input type="text" name="event" value="" />
<input type="text" name="ip" value="" />
<input type="text" name="date" value="" />