AngularJs控制器在两个单独的文件中

时间:2016-03-04 00:31:04

标签: angularjs controller

在我的class parent(): def __init__(self, i): self.i = i @staticmethod def foo(i): c = child(i) return c class child(parent): def bar(self): print("Lucker number {}.".format(self.i)) # just to show the parent __init__ function is called c = parent.foo(7) c.bar() #=> Lucky number 7. 文件中,我有以下代码:

Javascript

现在,通过ng-route,我有另一个名为user.html的页面,这很简单:

var app = angular.module('allApps',['ngRoute', 'ui.bootstrap']);
app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/', {
      template: ''
    })
    .when('/user', {
      templateUrl: 'pages/user.html'
    })
    .when('/gallery', {
      templateUrl: 'pages/gallery.html'
    })
    .when('/contacts', {
      templateUrl: 'pages/contacts'
    })
    .otherwise({
      redirectTo: '/'
    });
}]);

在我的<div ng-controller = "Ctrl2"> {{user.name}} </div> <script type="text/javascript"> angular.module('allApps').controller('Ctrl2',function($scope){ $scope.user={name:"Jim", lastname:"Smith"}; }); </script> 文件中,我有以下代码:

HTML

但它不起作用。的错误

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">    
<script type="text/javascript" src ="js/script.js"></script>
<link href="css/style.css" rel="stylesheet">

我做错了什么?

提前致谢。

3 个答案:

答案 0 :(得分:1)

在角度已经自举之后,您无法添加控制器,除非您使用某种奇特的延迟加载。因此,在视图上添加脚本块中的控制器是行不通的。

答案 1 :(得分:1)

您可以在不同的脚本文件中拥有多个控制器。但是在开始渲染视图之前,脚本文件应该先复制。

尝试将控制器绑定到路由配置中的模板视图

var app = angular.module('allApps',['ngRoute', 'ui.bootstrap']);
app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/', {
      template: '',
      controller: 'Ctrl1'
    })
    .when('/user', {
      templateUrl: 'pages/user.html',
      controller: 'Ctrl2'
    })
    .when('/gallery', {
      templateUrl: 'pages/gallery.html',
      controller: 'Ctrl3'
    })

答案 2 :(得分:0)

你没有很好地关闭你的第一个功能。它应该

var app = angular.module('allApps',['ngRoute', 'ui.bootstrap']);
app.controller('Ctrl1',[ '$scope', function ($scope){
   ...
}]);