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

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

Frage

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

War es hilfreich?

Lösung 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>

Andere Tipps

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>.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top