假设我有一个锚标记,例如
<a href="#" ng-click="do()">Click</a>
如何防止浏览器导航到AngularJS中的#？
我搜索了一个类似的问题,但出现的问题似乎略有不同.我试图动态更改链接的ui-sref =''(此链接指向向导表单的下一部分,下一部分取决于在下拉列表中进行的选择).我只是试图根据选择框中的一些选择设置ui-sref属性.我可以通过绑定到在进行选择时设置的范围属性来更改ui-sref.但是链接不起作用,这有可能吗？谢谢
<a ui-sref="form.{{url}}" >Next Section</a>
然后在我的控制器中,我以这种方式设置url参数
switch (option) {
case 'A': {
$scope.url = 'sectionA';
} break;
case 'B': {
$scope.url = 'sectionB';
} break;
}
或者,我使用指令通过根据在选择框(下拉列表)上选择的选项生成具有所需ui-sref属性的超链接来使其工作.
无论如何这意味着每次从选择框中选择不同的选项时我必须重新创建链接,这会导致不希望的闪烁效果.我的问题是,是否有可能通过改变控制器中url的值来改变ui-sref的值,因为我试图在上面做,或者我每次选择时都必须使用指令重新创建整个元素就像我在下面做的那样？(只是为了完整性而显示)
define(['app/js/modules/app', 'app/js/directives/hyperLink'], function (app) {
app.directive('selectUsage', function ($compile) {
function createLink(scope,element) {
var newElm = angular.element('<hyper-link></hyper-link>');
var el = $(element).find('.navLink');
$(el).html(newElm);
$compile(newElm)(scope);
}
return {
restrict: 'E',
templateUrl: '/Client/app/templates/directives/select.html'
,link: function (scope, element, attrs) {
createLink(scope, element);
element.on('change', function () {
createLink(scope,element);
})
}
}
})
define(['app/js/modules/app'], function (app) …假设我有嵌套的DOM,每个都有ui-sref不同的angular-ui-router状态.我想单击外部以仅警报外部并单击内部以仅警报内部.目前,如果我点击内部,它将提醒外部和内部状态.
HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.13/angular.js" data-semver="1.2.13"></script>
<script data-require="ui-router@0.2.8" data-semver="0.2.8" src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<a ui-sref="outer" style="width:300px;height:300px;background:yellow;">
Outer
<span ui-sref="inner" style="width:100px;height:100px;background:red;">Inner</span>
</a>
</body>
</html>
使用Javascript:
var app = angular.module('plunker', ['ui.router']);
'use strict';
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state("outer", {
url: "/outer",
resolve: {
test: function() …我使用ng-repeat设置如下导航,效果非常好
<a ui-sref="{{link.Route}}" ng-click="clickLink(link)">
<span class="title"> {{link.Text}} </span><span class="selected"></span>
</a>
但是,我的导航项经常有子链接,这意味着父链接实际上不是导航链接,它只是用于展开和查看子链接.但有时它是一个链接,并没有要显示的子链接.
问题出在那些特殊情况下,当没有可用的状态时,我需要一起删除ui-sref,因为根本不应该有链接.有它在那里抛出'错误:无效状态参考'''
当状态不可用时,如何删除ui-sref？
routing angularjs angularjs-routing angular-ui-router ui-sref
我正在使用angular-ui-router在bootstrap和angular中编写一个下拉导航.当链接有下拉列表时,链接应为空白.但是,如果我将一条空白路径传递给ui-sref,我会收到错误消息.
这是一段代码片段:
<ul class="dropdown-menu">
<li ng-repeat="button in buttons" id="foo" ng-class="{'dropdown-submenu': $index=button.hasLinks}" >
<a ui-sref="{{button.route}}" title="{{ button.text }} Tab" class="{ dropdown-toggle: button.links }" data-toggle="dropdown">
<i class="icon icon-{{ button.icon }}"></i> {{ button.text }}
</a>
<ul class="dropdown-menu">
<li ng-repeat="link in button.links">
<a ng-href="{{ link.route }}" title="{{ link.text }} Tab">
{{ link.text }}
</a>
</li>
</ul>
</li>
</ul>