程序员经验分享-hwhale

Angular UI Router根命名视图模板从子视图更改

2024-01-28

安装程序使用 Angular v1.5.8 和 ui-router v0.3.1 。我的根视图有几个命名部分（为了简洁起见，我删除了其中的一些部分）。看起来像这样

<section id="container">
    <div id="main">
        <div id="overlay">
            <section id="overlay__content" ui-view="overlay"></section>
        </div>
        <div id="content">
            <section id="content__content" ui-view="content"></section>
        </div>
    </div>
</section>

我的状态控制器看起来像这样

$stateProvider
    .state('app',{
        url: '/',
        abstract: true,
        views: {
            'overlay': {
                templateUrl: partialsUrl + 'main.overlay.html', // <-- content below
                controller: 'OverlayController',
                controllerAs: 'vm'
            }
        }
    })
    .state('app.foo', {
        url: 'foo',
        views: {
            'content@': {
                templateUrl: partialsUrl + 'foo.main.html',
                controller: 'FooController',
                controllerAs: 'vm'
            }
        }
    })
    .state('app.foo.add', {
        url: '/add',
        views:{
            'content@overlay':{ // <-- DOES NOT WORK
                templateUrl: partialsUrl + 'foo.add.html',
                controller: 'FooAddController',
                controllerAs: 'vm'
            }
        }
    })

我的叠加视图模板（main.overlay.html）看起来像这样

<a class="close">&times;</a>
<div ui-view="content"></div> <!-- <-- LOAD CONTENT INTO HERE -->

我想做的是当app.foo.add状态被启动以将内容加载到content的部分overlay根命名视图。我可以使用访问根内容视图content@成功地作为此处描述 https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views。然而，似乎没有任何关于深入探讨国家观点的文献。理想情况下我会想象我想要类似的东西content@app(overview)（假如说()允许您选择一个命名视图然后进入它，或者也许content@app@overview。两者都不起作用。

任何有关解决方案或我缺少的基本内容的建议将不胜感激


如果我正确地解释了你的问题，那么我认为这应该有效：

<!doctype html>
<html>
  <head>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script>
      angular.module('app', ['ui.router']).config(function($stateProvider){
        $stateProvider
          .state('app', {
            url: '/',
            abstract: true,
            views: {
              'overlay': {
                templateUrl: 'overlay.html'
              }
            }
          })
          .state('app.foo', {
            url: 'foo',
            views: {
              'content@': {
                templateUrl: 'foo.content.html'
              }
            }
          })
          .state('app.foo.add', {
            url: '/add',
            views: {
              'content@app': {
                templateUrl: 'foo.add.content.html'
              }
            }
          });
      }).run(function($state){
        $state.go('app.foo.add');
      });
    </script>
  </head>
  <body ng-app="app">
    <div ui-view="overlay">

    </div>
    <div ui-view="content">

    </div>
    <script type="text/ng-template" id="overlay.html">
      <h1>Overlay</h1>
      <div ui-view="content"></div>
    </script>
    <script type="text/ng-template" id="foo.content.html">
      <h1>Foo Content</h1>
    </script>
    <script type="text/ng-template" id="foo.add.content.html">
      <h1>Foo Add Content</h1>
    </script>
  </body>
</html>

解释

我认为你的误解是后面的符号是什么@代表。前面的符号@是要匹配的视图的名称，后面的符号@是对 ui-view 指令应存在的模板状态的引用。

所以在这个例子中，content@app是说寻找ui-view="content"在任何视图内app state.

希望这是有道理的。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

angularJS

angularuirouter

Angular UI Router根命名视图模板从子视图更改 的相关文章

随机推荐

  • 通过正则表达式查找括号

    我不太擅长正则表达式 我正在查找字符串是否包含 注意 我并不是在寻找实际的 中的内容 只是看字符串中是否包含 或 我知道如果我执行 scan 它将获取任何匹配项并创建一个数组 我想要的 我只是不知道表达方式 使用非贪婪匹配的替代方案 没有那

  • 从 .NET 数据库中检索数据的最快方法？

    Using ADO NET http en wikipedia org wiki ADO NET 从数据库检索数据并将数据填充到我的业务对象中的最快方法是什么 我应该使用哪一个 DBDataReader DBDataAdapter 或任何其

  • segue：目标视图控制器的怪异

    在我的应用程序中 我使用故事板和转场 并且经常在执行转场之前将数据传递到目标视图控制器 如下所示 void prepareForSegue UIStoryboardSegue segue sender id sender if segue

  • 如何检查一种类型是否具有另一种类型的所有键但没有附加键？

    我想检查一种类型是否具有另一种类型的所有键 但没有其他键 例如它是一个子集 基本上 我需要一些像下面这样的函数 如果 TTo 不是子集 它会给我打字稿错误 function typeCheck

  • imagerotate() 不起作用

    我的 imagerotate PHP 函数有问题 我运行下面的脚本 它成功地使用 imagejpeg 创建了新图像 但新图像与原始图像相同 因此它不会旋转它 它在 Apache error log 中没有显示错误消息 所以我不知道 file

  • mysql用触发器设置最大行数

    我想创建一个最多包含 5 行的表 因此 如果我添加新行并且表已经有 5 行 则触发器应删除第一行并添加新行 e g my table id data 1 a 2 b 3 c 4 d 改成 my table id data 2 b 3 c 4

  • 是否可以创建一个通用的 Session.QueryOver ？

    出于好奇 是否可以使用 NHibernate 3 执行类似的操作 public IQueryable

  • 为什么我的程序会改变布尔值？ [关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 我正在编写一个简单的程序 用于检查输入单词是否可以用输入字母拼写 无论我输入什么 布尔值总是会更改为 true 即使 if 语句中

  • Symfony：Doctrine 数据装置：如何处理大型 csv 文件？

    我正在尝试使用学说数据固定装置从 大 CSV 文件 3Mo 37000 行 7 列 插入 在 mySQL 数据库中 数据 过程非常缓慢 此时我无法成功 可能我还得再等一会儿 我想学说数据装置并不是为了管理如此大量的数据 也许解决方案应该是将

  • 有免费的 XNA UI 库吗？

    我正在考虑游戏中的游戏用户界面 查看 XNAML http msmvps com blogs valentin pages xnaml component aspx http msmvps com blogs valentin pages

  • 类成员的继承，与模板混合

    在下面的代码中 为什么T2给出这个错误 m t was not declared in this scope 而结核病还好吗 我如何在仍然使用模板的情况下访问 T2 中的 T1 成员 All good class TA public TA

  • 如何为某种特定类型而不是全局设置 Json.NET ContractSerializer？

    我想仅为 ASP NET Web API 应用程序中的某些类型设置合同序列化程序 我可以在 App Start FormatterConfig cs 中全局设置设置 如下所示 public static void RegisterGloba

  • 简洁和匿名类型

    是否可以在 Dapper 中使用匿名类型 我可以看到如何使用动态即 connection Query

  • Java – 高效、数据库感知的实例级授权？

    在 JPA 应用程序中 我有一个场景 其中该应用程序是 列出给定用户有权提款的所有帐户 我有帐户实体和一个多对多表 其中列出了每个用户对每个帐户拥有的授权 为了实现上述场景 应用程序当前只是内部联接两个表 这非常快 现在 我计划添加一个显式

  • 从 SQL SERVER 中的 CTE 删除行

    我有一个 CTE 它是表上的选择语句 现在 如果我从 CTE 中删除 1 行 它会从我的基表中删除该行吗 如果我有一个临时表而不是 CTE 情况也是一样吗 检查DELETE语句文档 http msdn microsoft com en us

  • Azure 服务总线通知中心是否可以与 websockets 和 javascript 配合使用？

    我对使用 Azure 服务总线通知中心感兴趣 然而 我的第一个 客户端 将是使用 Knockout 与 ASP NET MVC 站点进行基于 Websocket 的连接 目前 我正在尝试使用 SignalR 向客户端推送通知 然而 如果我可

  • 从命令行运行 android 单元测试？

    我正在尝试按照以下方式在 android 平台上运行单元测试tutorial http developer android com guide topics testing testing android html 举例来说 我想为电子邮件

  • Symfony2 中 $em->clear() 出现未定义索引错误

    我编写了一个 Symfony 命令来从 API 导入一些数据 它可以工作 但问题是当我在数据库中插入一个大的 JSON 时 我的 PHP 内存使用量会增加 每次导入活动后 我的工作单位都会增加 2 我已经取消设置了所有使用过的对象 并且当你

  • 如何通过代码有选择地禁用浏览器文本输入中的自动填充？

    是否可以使用代码有选择地禁用文本字段中的自动填充功能 我正在 ASP Net AJAX 中开发自定义代码以在数据库中搜索建议 并且我想防止当用户开始在文本框中键入内容时出现浏览器建议 我正在寻找一种适用于最现代的浏览器 IE 7 和 8 F

  • Angular UI Router根命名视图模板从子视图更改

    安装程序使用 Angular v1 5 8 和 ui router v0 3 1 我的根视图有几个命名部分 为了简洁起见 我删除了其中的一些部分 看起来像这样 section div div section section div div

热门标签