AngularJs路由不适用于嵌套的部分页面

时间:2015-03-27 19:06:34

标签: angularjs routes

我是AngularJS的新手。我已经完成了一段代码,其中有三个部分页面。当我点击某些东西时,我试图从部分2加载部分三。问题是partial3正确加载但angularjs绑定不能正常工作。

这是我的代码。

app.js

'use strict';

// Declare app level module which depends on views, and components
angular.module('myApp', [
  'ngRoute',
  'myApp.view1',
  'myApp.view2',
  'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider
      .when('/view1',{
          templateUrl: 'view1/view1.html'
      })
      .when('/view2',{
          templateUrl: 'view2/view2.html'
      })
      .when('/view3',{
          templateUrl: 'view3/view3.html',
          controller : 'view3Ctrl'
      })
      .otherwise({redirectTo: '/view1'});
}]);

myApp.controller('view3Ctrl',function($scope){

    $scope.name = "somename";
});

view2.html

<p>This is the partial for view 2.</p>
<p>
 this is view2
</p>
<p><a href="#/view3">Click here</a></p>

view3.html

<p>This is the partial for view 3.</p>
<p>
   this is view3
   <p> {{name1}}</p>
</p>

输出: 这是视图3的部分内容。

{{NAME1}}

而不是绑定名称,它显示{{name1}}

1 个答案:

答案 0 :(得分:0)

您似乎没有正确创建控制器。你有几个选项可以做,它主要取决于你的编码风格。

首先,您可以将其链接到模块调用,如下所示

angular.module('MyApp', []).controller();

或者你只需​​要调用模块getter方法而不是setter。这看起来像这样:

angular.module('MyApp', []); //setter method
angular.module('MyApp').controller(); //getter method