Question

我有一个关于使用路由加载外部页面的快速问题。我对AngularJS非常新。

var app = angular.module('app', []);
$routeProvider.when('/list', {
    templateUrl: '/list.html'
})

加载页面，但在list.html中有控制器定义。

list.html：

<script>
app.controller('test', function(){
    console.log('test');
});
</script>

<div ng-controller="test">

</div>

上面的代码会给我一个错误，因为test是未定义的函数，除非我把app.controller('test')放到父页面上。

所以我不能把控制器放在外部.html文件上？

以下更新的链接： http://plnkr.co/edit/YC6P9W1VfzX8XOyrynCP?p=preview

Answer 1

你必须创建一个单独的script.js，并且应该在主页面执行期间或在点击链接期间加载到主html页面

    index.html

    <!DOCTYPE html>
    <html ng-app="app">
      <head>
        <link rel="stylesheet" href="style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
        <script src="script.js"></script>
        <script src="testscript.js"></script>
      </head>
      <body ng-controller="home">
        <h1>Hello Plunker! {{change}}</h1>
        <a href="#/test" ng-click="test()" title="Click Test">Test</a>
        <ng-view></ng-view>
      </body>
    </html>

    testscript.js

    function test2($scope){
          console.log('succeed');
    };

    script.js

    // Code goes here
    var app = angular.module('app', ['ngRoute']);

    app.controller('home', function($scope){
      $scope.change = "change";  

      $scope.test = function(){
        console.log('clicked');
      }
    });

    app.config(function($routeProvider){
      $routeProvider.when('/test', {
          templateUrl: 'test.html',
          controller: function(){
            console.log('here');
          }
      })
    });

AngularJS用控制器加载外部页面

1 个答案: