Angular JS路由和指令,templateURL不起作用

时间:2014-03-30 14:10:16

标签: angularjs

我使用templateURL时出现问题。

我有以下代码

  <!DOCTYPE html>
<html ng-app="testApp">
<head>
    <title>Angular Demo</title>
</head>
<body>  
<div class="container">
    <ul class="nav nav-pills">
        <li><a href="#/">Home</a></li>
        <li><a href="#/about">About</a></li>
    </ul>
</div>
<div ng-view>
</div>
<script src="scripts/libraries/angular.min.js"></script>
<script src="scripts/libraries/angular-route.min.js"></script>
<script type="text/javascript">
    var testApp = angular.module("testApp", ['ngRoute']);
    testApp.config(function($routeProvider) 
    {
    $routeProvider
    .when('/',
    {
    controller: 'TestController',
    template: '<h1>HOME</h1>'
    })
    .when('/about',
    {
    controller: 'TestController',
    templateURL: 'partials/about.html'
    })
    .otherwise ({redirectTo: '/'});    
    });

    var controllers = {};

    controllers.TestController = function($scope)
    {
    $scope.list = 
    [
    {fname: "John", sname: "Doe"},
    {fname: "John", sname: "Doe"}
    ];
    };

    testApp.controller(controllers);

</script>
</body>
</html>

about.html位于partials文件夹

template: "HOME"工作正常,但templateURL不会将about.html的内容绑定到ng-view

如果您认为我遗漏了任何东西,请告诉我。

由于

1 个答案:

答案 0 :(得分:2)

使用
templateUrl: 'partials/about.html'


templateURL: 'partials/about.html'

http://plnkr.co/LzYn0IxRtkV1xoKpcg5z