Question

作为一名新的角色开发人员，我经历了一些教程并构建了一些独立的或基于火力的角度练习应用程序，并且认为我正在处理该框架。我想开始一个真正的应用程序与服务器和数据库配对，所以我在github上找到了一个laravel供电的角度堆栈：

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的值+＆＃39; ed＆＃39;但数据绑定不起作用。在页面加载上，变量设置为＆＃39; test＆＃39;并且＆＃39;测试＆＃39;应该如此，但打字并不更新{{stringed}}的值。即使我抛弃了控制器中的所有内容，只是将textarea和h3放在同一个{{string}}上，它就不起作用了。

如果我在$ scope中包装东西。$ watch然后我得到一个＆＃34; $摘要已经运行＆＃34;错误。如果有人能指出我正确的方向，那就会摇滚。此外，如果有人能解释为什么这个堆栈使用的是构造函数，而不仅仅是app.controller（），就像所有的angularjs教程一样，并使用几十个导出/导入，这将是锦上添花！

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

希望我的问题过于复杂！谢谢！

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}}＆amp; {{stringed}}将其显示为值，它实际上并不绑定它。

Answer 2

将string stringed变为string变量仅适用于第一次。更新变量stringed后，不会更新<h3>Parsed string: <span ng-bind="string+ 'ed'"></span></h3>变量的值。因为它们是原始类型变量。您尝试做的事情只有在引用类型变量这样的对象的情况下才可能。

如果您担心在UI上显示anl值。你不需要为它有单独的变量（虽然它不会按你的意愿工作，因为它是原始类型）

直接在视图上绑定它。

{{1}}

Answer 3

Heres我是如何开始工作的：

    $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所说，将新函数绑定到span元素使用ng-bind，并传入$ scope.string，它工作正常！

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

3 个答案: