gpt4 book ai didi

javascript - 避免在 Angular ui-router 中使用 ui-view

转载 作者:行者123 更新时间:2023-11-30 17:37:38 26 4
gpt4 key购买 nike

似乎Angular.js ui-router必须ui-view为了让整个事情发挥作用。这是一个没有 ui-view 的例子路由不工作(无警报):http://plnkr.co/edit/e1vzj6pDdqADKJ2LSsd3?p=preview

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.12/angular.js" data-semver="1.2.12"></script>
<script data-require="ui-router@*" 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 href="#/link">Test</a>
<!--div ui-view></div-->
</body>

</html>

Javascript:

var app = angular.module('plunker', ['ui.router']);

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {

$stateProvider
.state("link", {
url: "/link",
resolve: {
test: function() {
alert("Triggered resolve /link");
return true;
}
}
});
}]);

app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});

如果你输入 <div ui-view></div>回来,它会起作用。

这没什么大不了的,因为我可以离开那个 ui-view空的。我不使用 ui-view (可能听起来很奇怪)因为 ui-view替换 DOM。我只想切换我的 container而不是完全推倒重来。

  1. 离开是正确的做法吗ui-router空空如也?

  2. 有没有办法让ui-router不需要 ui-view ?

最佳答案

您可以使用 ng-show 或 ng-if 来实现 dom 元素的切换。但我确实理解您的观点,即有时您只需要将 ui-router 用作面向对象的位置管理工具。

您可以使用 ui-sref您的 <a> 上的属性而不是将纯 href 作为 hack 来进入不知道在哪里呈现的状态。

我编辑了你的 plunkr 来演示:

http://plnkr.co/edit/KLm8HTIkvnbGzhzmwSwG?p=preview

基本改变

  <a href="#/link">Test</a>

到:

 <a ui-sref="link">Test</a>

我不确定最佳实践或任何事情。这是一个很好的问题,很抱歉我无法完全回答您提出的第一点。不确定这是否是正确的方法,这完全取决于您如何使用 ui-router。在一个相当大的应用程序中,我们有很多命名 View ,然后我们确实使用 ui-view,但我知道有时它是无用的。

关于javascript - 避免在 Angular ui-router 中使用 ui-view,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21722469/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com