angularjs如何在不更改url的情况下加载另一个控制器
Posted
技术标签:
【中文标题】angularjs如何在不更改url的情况下加载另一个控制器【英文标题】：angularjs how to load another controller without change the url 【发布时间】：2014-11-22 07:37:54 【问题描述】：我有一个类似/products/:product_id的网址
在这个控制器中，我检查产品 ID 是否存在，如果不存在，我想加载一个控制器，它会显示一些文本，如“未找到产品”。
我正在寻找一些功能，例如：
$location.path('/product_not_found');
但不更改栏中的 URL
有什么想法吗？
谢谢！
【问题讨论】：
我不是 Angular 方面的专家，但您是否尝试在控制器中检查该条件并打印“未找到”而不是产品？ 为什么需要单独的控制器来打印 3 个单词？ 【参考方案1】：angularjs 可以为 html 标签添加属性。如果找到产品则显示产品，如果没有则显示消息，我更喜欢使用ng-show 属性。例如：
使用 ng-show 不会影响 URL，因为内容已经加载。
HTML：
<html ng-app="productDisplay">
<head>
<title>Product info</title>
<script src="js/angular.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div id="content" ng-controller="ProductController as productCtrl">
<div ng-show="status === 'waiting'">
<p>waiting for product to load..</p>
</div>
<div ng-show="status === 'found'">
<!-- display product info here -->
<p>Name: product.name </p>
<p>Price: product.price </p>
</div>
<div ng-show="status === 'not-found'">
<p style="color: red;">Not found such product</p>
</div>
</div>
</body>
</html>
JS：
(function()
// can access varibal app only in this function scope
var app = angular.module('productDisplay', []);
app.controller('ProductController', ['$scope', function($scope)
$scope.product = name: '', price: '';
$scope.status = 'waiting';
this.getProduct = function()
found = false;
/** some code checking if product found */
if (!found)
$scope.status = 'not-found';
return ;
else
$scope.status = 'found';
return name: 'BBB', price: '123$';
;
$scope.product = this.getProduct();
]);
)();
【讨论】：
以上是关于angularjs如何在不更改url的情况下加载另一个控制器的主要内容，如果未能解决你的问题，请参考以下文章
AngularJS：在不完全重新加载控制器的情况下更改哈希和路由