Angularjs two-way data binding not working; $watch doesn't work either

Question

As a new angular developer, I went through a few tutorials and built a few stand-alone or firebased angular practice apps, and thought I was getting a handle on the framework. I wanted to start a real app paired with a server and database, so I found a laravel powered angular stack on github:

https://github.com/jadjoubran/laravel5-angular-material-starter

To make a long story short, the code generated by this stack for angular controllers looks completely foreign to any angular I've seen:

class CreateStringFormController{
    constructor(){
        'ngInject';
        //
    }
}

I added

class CreateStringFormController{
    constructor($scope){
        'ngInject';
        $scope.string = 'test';
        $scope.stringed = $scope.string+'ed';

        //
    }
}

and my template:

<textarea rows="4" columns="50" class="form-control">{{string}}</textarea>
<h3>Parsed string: <span>{{stringed}}</span></h3>

The idea here is that when you type in the text area, the h3 below it outputs the value of the textarea+'ed' but the data binding is not working. On the page load the variables are set to 'test' and 'tested' as they should be, but typing doesn't update the value of the {{stringed}}. Even if I ditch everything in the controller and just put both the textarea and the h3 to be the same {{string}} it doesn't work.

If I wrap things in $scope.$watch then I get a "$digest already running" error. If anyone could point me in the right direction, that would rock. Also, if anyone could explain why this stack is using a constructor instead of just app.controller() like all the angularjs tutorials do, and using literally dozens of export/imports, that would be icing on the cake!

PS the files are .js, not .ts, not that I know what typescript is, but that has come up a lot in my googling.

Hope my question isn't too overly complicated! Thanks!

JanR · Accepted Answer · 2016-03-07 05:42:44Z

1

Ok, try this in your template:

<textarea rows="4" columns="50" class="form-control" ng-model="string"></textarea>

same for your <span>

<h3>Parsed string: <span ng-bind="stringed"></span></h3>

Using {{string}} & {{stringed}} displays it as the value, it doesn't actually bind it.

edited Mar 7, 2016 at 5:42

answered Mar 7, 2016 at 5:32

JanR

6,1303 gold badges25 silver badges30 bronze badges

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

3 Comments

hamncheez Over a year ago

Ng-model worked for the textarea, like it should, and didn't work for the span, also expected behavior. Ng-bind would set the variables correctly on the pageload, but no dice on the data binding.

JanR Over a year ago

Have you tried adding a $scope.$apply() to the end of CreateStringFormController?

Pankaj Parkar Over a year ago

@hamncheez could you look at mine answer?

Pankaj Parkar · Accepted Answer · 2016-03-07 05:51:27Z

1

Assinging string to stringed variable will only work at first time. After updating variable string will not update value of stringed variable. Because they are primitive type variable. The thing which you are trying to do is only possible in case of reference type variable such object.

If you are worried about to show anl value on UI. You don't need to have separate variable for it(though it will not work as you want, because it is primitive type)

Do bind it on view directly.

<h3>Parsed string: <span ng-bind="string+ 'ed'"></span></h3>

edited Mar 7, 2016 at 5:51

answered Mar 7, 2016 at 5:45

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

1 Comment

hamncheez Over a year ago

So while this would work in this instance, it isn't what I needed; I need a rather complex function, too complex to put in the ng-bind. However, this lead me very close to the solution I did find. I make a function in the controller on the $scope that returns the value I want, then bind that function to the <span>, passing in $scope.string and it worked!

hamncheez · Accepted Answer · 2016-03-08 13:51:37Z

0

Heres How I got it to work:

    $scope.string = 'whit';
    $scope.stringed = function(input){
        return input+'ed';
    }

Then in the template:

<textarea rows="4" columns="50" class="form-control" ng-model="string"></textarea>
<h3>Parsed string: <span ng-bind="stringed(string)"></span></h3>

So I did the logic needed in a function that returns my value, put that on the $scope (does anyone know the correct vocabulary for that?), then, as Pankaj Parkar said, bound the new function to the span element with ng-bind, and passed in the $scope.string, and it worked!

answered Mar 8, 2016 at 13:51

hamncheez

7371 gold badge12 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angularjs two-way data binding not working; $watch doesn't work either

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related