更新HTML元素NG-视图外 [英] Updating HTML element outside of ng-view
问题描述
我有一个页面上的HTML如下：
I have the below HTML on a page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myCart">
<head>
<title>AngularJS Shopping Cart</title>
<link href="css/jsonstore.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div id="header">
<h1>The JSON Store</h1>
<div class="cart-info">
My Cart (<span class="cart-items">{{item.basketCount}}</span> items)
</div>
</div>
<div id="main" ng-view>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular-resource.js"></script>
<script src="js/routing.js"></script>
<script src="js/dataresource.js"></script>
<script src="js/basketinfo.js"></script>
<script src="js/index.js"></script>
<script src="js/detail.js"></script>
</body>
</html>
DIV的主得到通过我的路线HTML模板取代，但是我想更新购物篮计数标头部分。
The div "main" gets replaced by HTML templates by my routes however I would like to update the header section with a shopping basket count.
我试图模型绑定它所示的HTML和如下：
I have tried model binding it as shown in the HTML and below:
function DetailController($scope, item, basketDetail) {
$scope.item = item;
$scope.item.basketCount = basketDetail.getCount();
//more code
}
我也试过刚刚注射服务，并从HTML调用它。这两种方式没有做任何事情。
I've also tried just injecting the service and calling it from the HTML. Both ways do not do anything.
有人能帮助吗？
感谢
推荐答案
您头 DIV确实是一个观点，就像你所使用的定义与其他意见NG-视图。有一天，你可能想显示的不仅仅是该标题视图basketCount模型的更多。但是，你即使投影一件模型数据的成头部分的事实使该部分的视图。所以，我建议给予自己的$范围，预测，模型，因此它自己的控制器。
Your header div is really a view, just like the other views you've defined for use with ng-view. Someday, you might want to show more than just a basketCount model in that header view. But the fact that you are projecting even one piece of model data into that header section makes that section a view. So, I would recommend that be given its own $scope to project that model, hence its own controller.
剩下的则是放在哪里basketCount模式？我们必须考虑到多个视图可以允许用户这样做，需要影响模型的东西。角对许多需要获得正常的回答是依赖注入。所以，我把basketCount模型转换成服务。查看/需要访问它可以注入它的控制器。有一天，你的应用程序可能不需要使用这些模式的其他意见，所以这些看法不会注入服务。
What remains then is where to put the basketCount model? And we must consider that multiple views may allow the user to do something that need to affect that model. Angular's normal answer for "many need access" is dependency injection. So, I would put the basketCount model into a service. Views/controllers that need access to it can inject it. Someday your app may have additional views that don't need access to these models, so those views would not inject the service.
潜在的，整个篮子可以在这个服务建模：
Potentially, the entire basket could be modeled in this service:
app.factory('basketService', function() {
return {
items: [],
itemCount: 0,
...
}
});
function HeaderCtrl($scope, basketService) {
$scope.basket = basketService;
...
}
function DetailCtrl($scope, basketService) {
$scope.basket = basketService;
...
}
<div id="header" ng-controller="HeaderCtrl">
<h1>The JSON Store</h1>
<div class="cart-info">
My Cart (<span class="cart-items">{{basket.itemCount}}</span> items)
</div>
这篇关于更新HTML元素NG-视图外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
