- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在构建一个 AngularJS 应用程序,并使用 UI-Router 来浏览该应用程序。
网络应用程序的流程包括首先注册或登录,然后它会将您带到一个主网格,其中有许多通过 ng-repeat 显示的元素,当您单击其中一个元素时,它会将您带到一个仪表板,显示已单击元素的信息,并且还成功将路径更改为index.html#!/dashboard/(这里是元素的名称)
这是该主网格的 html 5 代码:
<div class="container">
<div class="row" ng-controller="ribtStateServicesController" >
<div class="col-md-3 ribt_HomeGrid" ng-repeat="estado in estados" >
<div class="img-ribt_overlay" >
<a ng-click="doWork(estado.idState)" ui-sref="dashboard({ribtNameState: estado.idState})">
<img src="{{estado.image}}" class="img-thumbnail">
<div class="ribt_overlay" ></div>
</a>
</div>
</div>
</div>
</div>
但是,在同一个仪表板中,我有一个侧面菜单,其中包含之前在主网格中使用的相同元素。所以我认为需要相同的逻辑才能使用 UI-Router 提供的参数来更改 URL 和显示的内容。但它什么也没做。
这是仪表板侧面菜单的 HTML 中的代码:
<div class="col-md-6 nopadding" ng-repeat="estado in estados | filter:busqueda">
<md-card md-ink-ripple="#ffffff">
<img ng-src="{{estado.nolabel}}" class="md-card-image ribt_estado_side_img"
ui-sref="dashboard({ribtNameState: estado.idState})"
alt="Estado" ng-click="doWork(estado.idState); toggleLeft()">
<md-card-title class="nopadding">
<md-card-title-text>
<p class="ribt_card_estado_nombre">{{estado.nombre}}</p>
</md-card-title-text>
<md-menu>
<md-button class="md-icon-button float-right" aria-label="Share" ng-click="$mdMenu.open()">
<i class="material-icons">more_vert</i>
</md-button>
<md-menu-content width="4" ng-mouseleave="$mdMenu.close()">
<md-menu-item ng-repeat="item in [1, 2, 3]">
<md-button>
Option {{item}}
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-card-title>
</md-card>
</div>
这是我的应用程序配置中的代码:
ribtApp.config(function ($stateProvider,$mdThemingProvider,$locationProvider) {
$stateProvider
.state('login', {
url: '',
templateUrl: 'ribtComponents/ribtLogin/ribtLogin.html',
controller: 'ribtLoginController'
})
.state('home', {
url: '/home',
templateUrl: 'ribtComponents/ribtHome/ribtHome.html',
controller: 'ribtStateServicesController'
})
.state('dashboard', {
url: '/dashboard/{ribtNameState}',
templateUrl: 'ribtComponents/ribtDashboard/ribtDashboard.html',
controller: 'ribtStateServicesController',
resolve:{
ribtNameState: ['$stateParams', function($stateParams){
return $stateParams.ribtNameState;
console.log($stateParams.ribtNameState)
}]
}
});
我尝试了控制台日志来查看参数是否已更改,确实如此,但它对 URL 路径没有任何作用。我已经尝试了很多在 stackoverflow 中找到的代码,但没有一个起作用。如果您能帮助我,我将非常感激。
最佳答案
您需要将 ng-href
切换为 ui-sref
,这是 ui-router 使用的 to set up links to change states 。所以像...
<div class="col-md-6 nopadding" ng-repeat="estado in estados | filter:busqueda">[...] <a ng-click="doWork(estado.idState)" ng-href="index.html#!/dashboard/{{estado.idState}}">
应该更像是......
<div class="col-md-6 nopadding" ng-repeat="estado in estados | filter:busqueda">[...] <a ng-click="doWork(estado.idState)" ui-sref="dashboard({ribtNameState: estado.idOrWhatever})">
需要注意的是,我不知道 doWork 实际上在做什么,所以我不知道这是否有必要。
如果需要在 Controller 中转换,也可以注入(inject) $state并使用$state.go(...) ,但根据我的经验,大多数时候 ui-sref 都可以处理它。
关于javascript - AngularJS UI 路由器 : ui-sref not updating URL in address bar?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47191730/
我有这个模板 1
我使用 ng-repeat 设置了导航,效果非常好 {{link.Text}} 但是,我的导航项经常有子链接,这意味着父链接并不是真正的导航链接,它只是用于展开和查看子链接。但有时它是
HTML: Order + 我要添加class="active"在 . 每当点击 +这个,那个时候class="active"添加 .
我是 Angularjs 的新手,我很想创建一个具有多个 View 的表单(使用 ui-router)。每个 View 将包含要填写的表单的不同数据,因此当一个 View 已填写后,我不想只单击 an
我想呈现一个链接,例如: 所在州名myState和 key myKey是变量。 有没有办法做到这一点? 最佳答案 我发现自己处于同样的情况,我也无法完成,尝试使用 ng-click 移动您的代码,并
我在 Angular 应用程序中创建了一个自定义指令,其中包含几个 ui-sref 链接。我希望此链接根据当前状态或正在加载的模板进行更改: 我的目的是通过属性传递此信息,以便基于 page 变量生
我在 header.html 中有以下 Angular 代码
你能告诉我一种禁用提交按钮的方法吗,该按钮会通过以下方式更改为新状态: Submit 仅当表单有效时才应启用该按钮。 ng-disabled 与 ui-sref 不起作用: Submit ap
我正在寻找编写一个指令,允许单击外部元素来克隆其所包含元素之一的 ui-sref ,这样单击外部元素的行为与单击.cloned 元素 ... example example
我需要使用带有参数和查询参数的 ui-sref 动态构建指向 Angular 应用程序上另一条路线的链接。示例: {{comment.subject}} 这会构造一个看起来像这样的链接 www
我的 ui-router 状态提供程序中有以下状态: $urlRouterProvider.when('/parent', '/parent/child'); $stateProvider.state
嗨,我有 angular 的 google map ,我正在尝试使用按钮制作自定义 marker.content 以到达另一条路线。我正在像这样设置merkers this.setMarker = f
我尝试在新选项卡中打开 ui-sref,注意到我不想从 Controller 调用它。从 View 端怎么做? See all Blogs
下面是我的代码: 查看: Total: {{item[0].nbtickets}} 在 app.js 中: .state('app.usersingle',{
我在我的应用程序上使用 Angular 的 ui-router 来尝试路由到主视图的 subview 。 main 和 child 都有自己的关联 ID。目前我可以导航到 parent ,但我与 ch
我想将一些额外的数据从 ui-sref 传递到 Controller 中.我正在循环一个 json 对象并向 sref 添加数据: $stateProvider.state('main.imgDesc
我之前为此使用了 ng-route,它运行良好,但是使用 UI Router,链接不再可点击,或者至少大部分时间都不可点击。当它们是非常随机的时,它们不会显示我正在使用的 html 模板。 HTML:
我有一个 html 文件 User Profile Vehicle 和一个js文件 .state('sideMenu.settings
This question is might be similar to this but with different requirements 。由于我无法发表评论(需要 50 分),所以我正在复
我希望 ng-repeat 从字符串内的 ui-srefs 构建 href。常见问题解答存储在数据库中,文本中包含链接。 JSON [ { "question": "How do I fi
我是一名优秀的程序员,十分优秀!