javascript - Angularjs 双向数据绑定(bind)不起作用； $watch 也不起作用

Question

作为一名新的 Angular 开发人员，我学习了一些教程并构建了一些独立的或基于 fire 的 Angular 练习应用程序，并认为我已经掌握了框架。我想启动一个与服务器和数据库配对的真实应用程序，所以我在 github 上找到了一个 laravel 支持的 Angular 堆栈:

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

长话短说，这个堆栈为 Angular Controller 生成的代码看起来与我见过的任何 Angular 完全不同:

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

我加了

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

        //
    }
}

和我的模板:

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

这里的思路是当你在文本区打字的时候，它下面的h3输出textarea+'ed'的值但是数据绑定(bind)不起作用。在页面加载时，变量被设置为“test”和“tested”，但输入不会更新 {{stringed}} 的值。即使我放弃 Controller 中的所有内容，只是将 textarea 和 h3 都设置为相同的 {{string}} 它也不起作用。

如果我将内容包装在 $scope.$watch 中，那么我会收到“$digest already running”错误。如果有人能指出我正确的方向，那就太棒了。此外，如果有人能解释为什么这个堆栈使用构造函数而不是像所有 angularjs 教程那样只使用 app.controller()，并且使用几十个导出/导入，那将是锦上添花!

PS 这些文件是 .js，而不是 .ts，并不是说我知道 typescript 是什么，但在我的谷歌搜索中出现了很多。

希望我的问题不会太复杂!谢谢!

Answer 1

好的，在你的模板中试试这个:

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

同样适用于您的 <span>

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

使用 {{string}} & {{stringed}}将其显示为值，实际上并不绑定(bind)它。