javascript - angularjs ng-controller doesn't work

I'm trying to work with AngularJS, and my "ng-controller" doesn't work.

<!DOCTYPE html>
  <html>
    <head>
      <script type="text/javascript" src="lib/angular.js"></script>
    </head>
    <body ng-app>
      <h1>Add user</h1>
      <form action="addUser" method="post">
        <input type="text" name="pseudo" placeholder="pseudo">
        <input type="password" name="password" placeholder="password">
        <input type="submit" value="envoyer">
      </form>
      {{1 + 2}}
      <div ng-controller="myController">
      {{ name }}
    </div>
    <a href="./remove">supression</a>
    <script type="text/javascript">
      function myController($scope){
        alert("test");
        $scope.name = 'toto';
      }
    </script>
  </body>
</html>

When I'm trying this in Chrome, {{1+2}} is correctly replaced by '3', but {{name}} is not. I expected 'toto'.

I'm also trying to display an alert on click event, and it doesn't work:

<script type="text/javascript">
  var myApp = angular.module('MyApp', []);
  myApp.controller('myController', ["$scope",function($scope){
    $scope.name = 'toto';
    $scope.onMyButtonClick = function(){
      alert("test");
    }
  }])
</script>

HTML

<div ng-controller="myController">
    {{ name }}
    <button ng-click="onMyButtonClick">test</button>
</div>

When I click, nothing happens.

I'm trying to work with AngularJS, and my "ng-controller" doesn't work.

<!DOCTYPE html>
  <html>
    <head>
      <script type="text/javascript" src="lib/angular.js"></script>
    </head>
    <body ng-app>
      <h1>Add user</h1>
      <form action="addUser" method="post">
        <input type="text" name="pseudo" placeholder="pseudo">
        <input type="password" name="password" placeholder="password">
        <input type="submit" value="envoyer">
      </form>
      {{1 + 2}}
      <div ng-controller="myController">
      {{ name }}
    </div>
    <a href="./remove">supression</a>
    <script type="text/javascript">
      function myController($scope){
        alert("test");
        $scope.name = 'toto';
      }
    </script>
  </body>
</html>

When I'm trying this in Chrome, {{1+2}} is correctly replaced by '3', but {{name}} is not. I expected 'toto'.

I'm also trying to display an alert on click event, and it doesn't work:

<script type="text/javascript">
  var myApp = angular.module('MyApp', []);
  myApp.controller('myController', ["$scope",function($scope){
    $scope.name = 'toto';
    $scope.onMyButtonClick = function(){
      alert("test");
    }
  }])
</script>

HTML

<div ng-controller="myController">
    {{ name }}
    <button ng-click="onMyButtonClick">test</button>
</div>

When I click, nothing happens.

Share Improve this question edited Jun 4, 2015 at 18:40 jbigman 1,27013 silver badges25 bronze badges asked Jun 4, 2015 at 16:31 Raph 1232 silver badges11 bronze badges

angular functions must be created before rendering the body. Add script in your head tag – Walter Chapilliquen - wZVanG Commented Jun 4, 2015 at 16:35
That doesn't work too :/ – Raph Commented Jun 4, 2015 at 16:38

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

Try: <body ng-app> ==> <body ng-app="MyApp">

In your script:

angular.module('MyApp', [])
.controller('myController', ["$scope",function($scope){
    $scope.name = "toto"
}])

Don't forget to

Declare your angular application angular.module('MyApp', [])
Insert the correct attribute in your body <body ng-app="MyApp">
Don't forget parenthesis ng-click="onMyButtonClick()

Try this

    var myApp = angular.module('MyApp', []);

    myApp.controller('myController', ["$scope",function($scope){
        $scope.name = 'toto';

        $scope.onMyButtonClick = function(){
            alert("test");
        }
    }])

<body ng-app="MyApp">
<h1>Add user</h1>
<form action="addUser" method="post">
    <input type="text" name="pseudo" placeholder="pseudo">
    <input type="password" name="password" placeholder="password">
    <input type="submit" value="envoyer">
</form>
{{1 + 2}}

<div ng-controller="myController">
        {{ name }}
        <button ng-click="onMyButtonClick()">test</button>
    </div>
<a href="./remove">supression</a>

</body>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - angularjs ng-controller doesn't work - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)