Data-Binding not working in view page - Angular.js

StackOverflow https://stackoverflow.com/questions/22232315

Вопрос

I have shown a simplified version of my problem below:

The directive 'name' is not understood when it is in the view 'loginView.html', however it works fine when It's in the main page '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");
       }

        });

The {{name}} just prints itself out when in the view 'loginView', but works fine and prints he contents of the input field when placed into index.html.

I'm very new at this and would appreciate any help. Thanks in advance

Это было полезно?

Решение 2

Just realised the problem was the ordering of the script declarations in the index.php page

The app reference should come before the controller:

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

Другие советы

You should write controller name but not path in controller option of routeProvider:

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

And attach file with controller (controllers/controllers.js) with tag <script>.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top