Question

我在下面展示了我的问题的简化版本：

当它在视图'loginView.html'中时，指令'name'不被理解，但是当它在主页'index.html'

时它可以正常工作

loginView.html

<p>Welcome : {{name}}</p>
<input type="text" data-ng-model="name"><br>
<button type="submit" data-ng-click="loginUser()">Login</button>

的index.html

<!doctype html>
<html data-ng-app="vla">
    <head>
        <title>Video Learning application</title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>

            <div class = "navBar">
            <div class = "leftButton"></div>
            <div class = "title">VLA</div>
            <div class = "rightButton"></div>
        </div>

            <div data-ng-view=""></div>

            <script src="scripts/angular.js"></script>
            <script src="scripts/angular-route.js"></script>
            <script src="controllers/controllers.js"></script>
            <script src="app.js"></script>

    </body>
    </html>

app.js

var app = angular.module('vla', ['ngRoute']);

app.config(function ($routeProvider){
           $routeProvider
            .when('/view1',
                  {
                  controller: 'controllers/controllers.js',
                  templateUrl: 'partials/loginView.html'
                  })
           .otherwise({ redirectTo: '/view1' });
});

controller.js

app.controller('loginController', function ($scope)
{
       $scope.loginUser = function () {
               alert("test");
       }

        });

{{name}}只是在视图'loginView'中打印出来，但工作正常并在放入index.html时打印输入字段的内容。

我对此很新，并感谢任何帮助。提前致谢

Answer 1

您应该在routeProvider的controller选项中编写控制器名称而不是路径：

$routeProvider
   .when('/view1',
       {
          controller: 'loginController',
          templateUrl: 'partials/loginView.html'
       })
       .otherwise({ redirectTo: '/view1' });

使用标记为controllers/controllers.js的控制器（<script>）附加文件。

Answer 2

刚刚意识到问题是index.php页面中脚本声明的排序

应用程序引用应该出现在控制器之前：

<script src="app.js"></script>
<script src="controllers/controllers.js"></script>

数据绑定在视图页面中不起作用 - Angular.js

2 个答案: