跨模板和视图路由的基本元素绑定，Angular JS
Posted
技术标签:
【中文标题】跨模板和视图路由的基本元素绑定，Angular JS【英文标题】：Basic Element binding across template and view route, Angular JS 【发布时间】：2016-07-13 16:07:58 【问题描述】：我正在学习如何有效地使用 Angular JS。而且我认为我在这里有一个易于解决的问题，但我似乎无法找到正确的语法来做我正在寻找的事情。
index.html：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
var app =angular.module('adt', []);
app.config(['$routeProvider',
function($routeProvider)
$routeProvider
.when('/add',
templateUrl: 'add.html',
controller: 'MainCtrl'
)
.otherwise(
redirectTo: '/add'
);
]);
app.controller('MainCtrl', ['$scope', function ($scope)
$scope.numberCounter = 0;
$scope.addOne = function()
$scope.numberCounter +=1;
;
]);
</script>
</head>
<body ng-app="adt" ng-controller="MainCtrl">
<a href="" ng-click="addOne()">AddNumber</a>
numberCounter
<br>
<div ng-view></div>
</body>
在这个基本示例中，我的 javascript 也包含在我的 HTML 中。
add.html:
ADDD
numberCounter
这个简单的应用程序所做的是每次单击我的名为 add number 的链接时增加我的范围变量numberCounter。号码计数器在我的主模板视图中工作，但使用视图路由（在名为 add.html 的视图中），号码计数器不会在点击时更新。但是，如果我在脚本中手动设置数字，视图 add.html 将更新数字。我在这里想念什么？我怎样才能让两个数字都更新？如果我的问题不清楚，请告诉我。
感谢您的帮助！
【问题讨论】：
可能最好创建一个 plunker/codepen/etc 【参考方案1】：问题在于您的html 代码。您不应该在控制器中包含ng-view（在您的情况下，您已将MainCtrl 添加到<body>）。
改成下面这样，
<body ng-app="adt">
<div ng-view=""></div>
</body>
并且在你的add.html中必须如下，
<a href="#" ng-click="addOne()">AddNumber</a>
numberCounter
Angular 所做的是，它使用属性ng-view 填充<div>，并使用通过您的$routeProvider（在您的情况下为add.html）配置的html 文件的内容，并加载相应的控制器（在你的情况下MainCtrl）。
开斋节：
如果您在所有视图中都需要 addNumber() 功能，您可以将其添加到 $rootScope 或者您可以在 ng-view 之前添加另一个 div。第二种方法是我认为最适合您的方法。
HTML：
<body ng-app="adt">
<div ng-controller="MainCtrl>
<a href="#" ng-click="addOne()">AddNumber</a>
numberCounter
</div>
<div ng-view=""></div>
</body>
我没有测试过这段代码，但它应该可以正常工作。因此，请随时评论任何问题。
【讨论】：
感谢您回复 Chinni 非常感谢您的帮助。看来您的解决方案是将我的 AddNumber 链接/按钮放入我的 add.html 中。但是我需要将链接放在主视图中，以便在路由不同的视图时可以访问它。这只是我正在使用的一个非常简化的版本，将来会有更多视图。 我不知道你为什么想要那个。但我已经编辑了我的代码。请检查一下。以上是关于跨模板和视图路由的基本元素绑定，Angular JS的主要内容，如果未能解决你的问题，请参考以下文章