跨模板和视图路由的基本元素绑定，Angular JS

Basic Element binding across template and view route, Angular JS

本文关键字：元素 绑定 JS Angular 视图 路由      更新时间：2023-09-26

我正在学习如何有效地使用Angular JS。而且我认为我在这里有一个容易解决的问题，但我似乎找不到正确的语法来完成我正在寻找的事情。

索引.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 中。

添加.html：

ADDD
{{numberCounter}}

这个简单的应用程序所做的是每次单击名为"添加数字"的链接时递增我的范围变量numberCounter。数字计数器在我的主模板视图中工作，但对于视图路由（在名为add.html的视图中），数字计数器不会在单击时更新。但是，如果我在脚本中手动设置数字，视图add.html将更新数字。我在这里错过了什么？如何更新两个数字？如果我的问题不清楚，请告诉我。谢谢你的帮助！

问题出在您的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 的作用是，它使用属性填充<div>，ng-view通过$routeProvider配置的html文件的内容（在您的情况下add.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>

我还没有测试过这段代码，但它应该大部分工作。因此，请随时评论任何问题。

相关文章：