Question

我正在尝试使用Materialize框架的Modal组件以及Angularjs＆＃39; ui-router模块，但我在尝试正确配置时遇到了问题。

这是我的$stateProvider定义

// Modal States ===============================
.state("modal", {
    views:{
      "modal": {
        templateUrl: "resources/templates/modal.html"
      }
    },
    abstract: true
})

.state("modal.modal1", {
    views:{
      "modal": {
        templateUrl: "resources/templates/modals/modal-content-1.html"
      }
    }
  })

和'ui-view＆＃39;我的index.html上的定义以及触发器

<div ui-view="modal" autoscroll="false"></div>

我想弄清楚的是如何使用Materialise按钮上的触发器渲染模态并同时切换到modal1状态。

模态的初始化很简单：

<a class="waves-effect waves-light btn" href="#modal1">Modal</a>
<!-- Modal Structure -->
 <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>

有什么想法？非常感谢！

Answer 1

似乎您编写的状态配置不正确，您使用了相同的命名＆＃34;模态＆＃34; ui-view在父母和子女的状态。您的resources / templates / modal.html是否还包含一个名为＆＃34; modal＆＃34;的ui-view。？

由于您的父状态是抽象的，因此无法激活，但是要渲染任何子状态，您的父状态模板应该具有ui视图。示例如下：

$stateProvider
    .state('contacts', {
        abstract: true,
        url: '/contacts',

        // Note: abstract still needs a ui-view for its children to populate.
        // You can simply add it inline here.
        template: '<ui-view/>'
    })
    .state('contacts.list', {
        // url will become '/contacts/list'
        url: '/list'
        //...more
    })
    .state('contacts.detail', {
        // url will become '/contacts/detail'
        url: '/detail',
        //...more
    })

参考：https://github.com/angular-ui/ui-router/wiki/nested-states-&-nested-views#abstract-state-usage-examples

使用Angularjs和MaterializeCSS创建有状态模态

1 个答案: