【问题标题】:(Angular) Simple nested views not working(角度)简单的嵌套视图不起作用
【发布时间】:2017-03-20 16:30:42
【问题描述】:

我正在学习 Angular,但我坚持使用 ui-router
这是代码。我正在使用 PUG 和 Livescript,我怀疑我是否因为这两个而遇到问题。

我的代码类似于 stackoverflow 中的一些答案,但我无法使其工作。 create.pug 未显示。

main.pug 是 index.pug 的子
create.pug 是 main.pug 的子节点

create.pug -> main.pug -> index.pug

版本:

angular -> 1.6.3
angular-ui-router -> 0.4.2

index.pug

html(ng-app="app.main")
  head ...
  body
    div(ui-view)

main.pug

md-subheader
  h1 To Do

md-divider
section(ui-view)

创建.pug

md-input-container
  label Title
  input(type="test" ng-model="app.new_task" ng-keypress="createTask($event)")

main.ls

MainController = ($scope) !->

angular
  .module 'app.main'
  .controller 'MainController', MainController

创建.ls

TaskCreateController = ($scope) !->
  app = @

  app.taskList = []

  $scope.createTask = ($event) !->
    if $event.keyCode !== 13 || !app.new_task
      return

  app.taskList.push app.new_task
  app.new_task = ''

  angular
    .module 'app.main'
    .controller 'TaskCreateController', TaskCreateController

路由器.ls

routeHelper = ($locationProvider, $stateProvider, $urlRouterProvider) !->
this.$get = ($state) ->
  'configureStates': (states) !->
      Object
        .entries states
        .forEach ([name, config]) !->
          $stateProvider.state name, config

$locationProvider.html5Mode false
$urlRouterProvider.otherwise '/'

angular
  .module 'app.main'
  .provider 'routeHelper', routeHelper

routes.ls

setupRoutes = (routeHelper) !->
  routeHelper.configureStates do
    'home':
      'url': '/'
      'templateUrl': 'modules/main/main.html'
      'controller': 'MainController'
      'controllerAs': 'app'

    'home.create':
      'url': '/create'
      'templateUrl': 'modules/task/create/create.html'
      'controller': 'TaskCreateController'
      'controllerAs': 'app'

angular
  .module 'app.main'
  .run setupRoutes

【问题讨论】:

  • 什么不工作?
  • create.pug 未显示
  • 好的,那么 IMO 有必要看看你是如何进行模板继承的,以了解全貌。
  • 这些是我仅有的文件(目前不包括供应商文件)我不确定模板继承到底是什么,我是新手。
  • 当你说“main.pug 是 index.pug 的孩子”时,你是怎么做到的,你是用 Pug includes 还是 content bloks

标签: angularjs angular-ui-router pug livescript nested-views


【解决方案1】:

mmh 我会尝试在此处添加缩进级别:

head(ng-app="app.main") ...
body
  div(ui-view)

head(ng-app="app.main") ...
  body
    div(ui-view)

或者说

html(ng-app="app.main")
  head
  body

【讨论】:

  • 对不起,我的错误,我的ng-app 在 html 中。我将编辑我的问题。
猜你喜欢
  • 1970-01-01
  • 2015-12-08
  • 1970-01-01
  • 2016-03-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-01-11
相关资源
最近更新 更多