Angularjs 双向数据绑定不起作用;$watch也不起作用

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

本文关键字：不起作用 watch Angularjs 数据绑定      更新时间：2023-09-26

作为一名新的角度开发人员，我浏览了一些教程并构建了一些独立或基于火力的角度练习应用程序，并认为我正在掌握框架。我想启动一个与服务器和数据库配对的真实应用程序，所以我在 github 上找到了一个 laravel 驱动的 angular 堆栈：

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

长

话短说，这个堆栈为角度控制器生成的代码看起来与我见过的任何角度控制器都完全陌生：

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' 的值，但数据绑定不起作用。在页面加载时，变量按原样设置为"test"和"tested"，但键入不会更新 {{stringed}} 的值。即使我放弃了控制器中的所有内容，只是将文本区域和 h3 都设置为相同的 {{string}}，它也不起作用。

如果我将内容包装在 $scope.$watch 中，则会出现"$digest已在运行"错误。如果有人能指出我正确的方向，那会很震撼。此外，如果有人可以解释为什么这个堆栈像所有 angularjs 教程那样使用构造函数而不仅仅是 app.controller（），并且使用数十个导出/导入，那将是锦上添花！

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

希望我的问题不要太复杂！谢谢！

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

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

您的<span>也一样 

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

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

将string连接到stringed变量仅在第一次时才有效。更新变量后string不会更新stringed变量的值。因为它们是基元类型变量。您尝试做的事情只有在引用类型变量此类对象的情况下才有可能。

如果您担心在 UI 上显示 anl 值。你不需要为它有单独的变量（尽管它不会像你想要的那样工作，因为它是基元类型）

请直接将其绑定到视图中。

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

以下是我如何让它工作：

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

然后在模板中：

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

所以我在一个返回我的值的函数中做了所需的逻辑，把它放在$scope上（有人知道正确的词汇表吗？），然后，正如 Pankaj Parkar 所说，使用 ng-bind 将新函数绑定到 span 元素，并传入 $scope.string，它起作用了！

相关文章：