Angular binding is not working on textbox?

Question

I am facing a string problem. I have placed a text input control and bind it with controller property and added a button input, but when i am trying to get the text input value on button click i am getting blank.

Controller

chat.controller('chatController', ['$scope', 'board', '$log', function ($scope, board, $log) {
$scope.Messages = [];
$scope.comment = '';
board.startBoard(function () {
    board.loadAllMessages().then(function (messages) {
        $scope.Messages = messages;
    });
});
$scope.likeClick = function (isfromChild, message) {
    $log.info(message);
};
$scope.dislikeClick = function (isfromChild, message) {
    $log.info(message);
};
$scope.addComment = function () {
    //HERE IS THIS PROBLEM
    alert($scope.comment);
    $scope.comment = ''; 
};
} ]);

Mark Up

 <div style="margin-top: 10px">
                                    <div class="input-group">
                                        <input type="text" class="form-control" data-ng-model="comment" placeholder="write a comment..." />
                                        <span class="input-group-btn">
                                            <button class="btn btn-info" data-ng-click="addComment()" id="button1">
                                                Post Commant</button></span>
                                    </div>
                                </div>

Ivan Chernykh · Accepted Answer · 2013-10-09 11:10:14Z

1

Just add ng-controller attribute , like this:

 <div style="margin-top: 10px"  ng-controller="chatController">

Working example: http://jsfiddle.net/shPwB/1/

answered Oct 9, 2013 at 11:10

Ivan Chernykh

42.2k13 gold badges136 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ivan Chernykh Over a year ago

@Ravi May be show us more of your code here or you can update my fiddle with your code

Ravi Over a year ago

I will show you my code as i am using some SignalR code to get data from server so may be service part will not work.

Ivan Chernykh Over a year ago

@Ravi change this: $scope.comment like this: $scope.data.comment and it will work: jsfiddle.net/shPwB/4

Ivan Chernykh Over a year ago

@Ravi take a look at Egghead' bindings explanation: youtube.com/watch?v=Lx7ycjC8qjE

Nitu Bansal · Accepted Answer · 2013-10-09 11:47:04Z

0

please update it as below

 <div style="margin-top: 10px" ng-controller="chatController">
                                <div class="input-group">
                                    <input type="text" class="form-control" data-ng-model="comment" placeholder="write a comment..." />
                                    <span class="input-group-btn">
                                        <button class="btn btn-info" data-ng-click="addComment()" id="button1">
                                            Post Commant</button></span>
                                </div>
                            </div>

answered Oct 9, 2013 at 11:47

Nitu Bansal

3,8563 gold badges20 silver badges24 bronze badges

2 Comments

Ivan Chernykh Over a year ago

copy+pasted from my fiddle? :D

Ravi Over a year ago

already defined data-ng-controller='chatController' at the top container.

Collectives™ on Stack Overflow

Angular binding is not working on textbox?

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related