Javascript 角度 $scope 变量未更新

Angular $scope variable not updating

提问by JoHksi

In my angular, I define a scope variable $scope.letter_content. When the view is loaded, I load string from my database and set it to $scope.letter_content. Then, I populate on a texteditor(Froala) i'm using.

在我的角度中，我定义了一个范围变量$scope.letter_content。加载视图后，我从数据库加载字符串并将其设置为$scope.letter_content. 然后，我填充我正在使用的文本编辑器（Froala）。

Below is the code for the view:

下面是视图的代码：

    {{letter_content}}
    <div ng-if="formData['page_number'] == 1 ">
        {{letter_content}}
        <textarea id="froala-sample-2" froala="froalaOptions" ng-model="letter_content"></textarea>
    </div>

So basically I set letter_contentas ng-model for the texteditor. So when I make changes on the texteditor, it modifies the value $scope.letter_content.

所以基本上我将letter_content文本编辑器设置为 ng-model。因此，当我对文本编辑器进行更改时，它会修改值$scope.letter_content。

One thing I found it weird is that when I modify the text in the texteditor, it changes {{letter_content}}inside the div. However, it does not update {{letter_content}}outside the div.

我发现很奇怪的一件事是，当我在文本编辑器中修改文本时，它会{{letter_content}}在 div 内发生变化。但是，它不会{{letter_content}}在 div 之外更新。

When I'm done editing the text in my texteditor, I send send a put request to update the value in the database with $scope.letter_content. However, it ends up sending {{letter_content}}outside the div which ends up not updating the content.

当我在我的文本编辑器中编辑完文本后，我会发送一个 put 请求来更新数据库中的值$scope.letter_content。但是，它最终会发送{{letter_content}}到 div 之外，最终不会更新内容。

Why is this weird thing happening?

为什么会发生这种奇怪的事情？

回答by Saumil

I had very similar but even weirder problem where I was updating one of my scopevariables using the response from an HTTP call, surprisingly, my view will not update unless I make another HTTP call and by another I mean any other random HTTP call.

我遇到了非常相似但更奇怪的问题，我正在scope使用来自 HTTP 调用的响应更新我的一个变量，令人惊讶的是，除非我进行另一个 HTTP 调用，否则我的视图不会更新，而另一个我的意思是任何其他随机 HTTP 调用。

Using the $applyworked for me,

使用$apply对我有用的，

$scope.$apply(function () {
     $scope.resultData.totalResults = response.data.total;
});

回答by Saumil

Actually this has been discussed in more links.

实际上，这已在更多链接中讨论过。

Don't use primitive type variable. Instead of that use object in scope.

不要使用原始类型变量。而不是在范围内使用对象。

For example, Don't use like $scope.primitiveVarialeinstead of this $scope.object={primitiveVariale:null}

例如，不要使用 like$scope.primitiveVariale而不是 this$scope.object={primitiveVariale:null}

So in view use like object.primitiveVarialethen this will be reflect in all the view. Please see the following links.

因此，在视图使用中，object.primitiveVariale这将反映在所有视图中。请参阅以下链接。

https://github.com/angular/angular.js/wiki/Understanding-Scopes

https://github.com/angular/angular.js/wiki/Understanding-Scopes

回答by fantarama

The ng-ifdirective create a new scope, so the letter_contentinside the divis in the ng-ifscope, but the letter_contentoutside is in the controller scope.

该ng-if指令创建一个新的作用域，因此letter_content内部div在ng-if作用域内，而letter_content外部在控制器作用域内。

Read the API doc to know which directive create new scope.

阅读 API 文档以了解哪个指令创建新范围。

To avoid this kind of problem consider using the controllerAs syntax

为避免此类问题，请考虑使用controllerAs 语法

回答by Bamieh

can you ever heard of angular's dot notation?

你听说过 angulardot notation吗？

solution

解决方案

put letter_contentin an object. froalaDetails.letter_contentfor example. then update that value and everything should work exactly like you want.

放入letter_content一个对象。froalaDetails.letter_content例如。然后更新该值，一切都应该像您想要的那样工作。

explanation

解释

watch this very short video to get the full details: https://egghead.io/lessons/angularjs-the-dot

观看这个非常短的视频以获取完整的详细信息：https: //egghead.io/lessons/angularjs-the-dot

回答by Antipod

Do not use plain values like this, you need to put such values into an object, so try in your controller:

不要使用这样的普通值，您需要将这些值放入一个对象中，因此请在您的控制器中尝试：

$scope.obj = { letter_content: null};

and then in your view:

然后在您看来：

{{obj.letter_content}}

回答by Ranjit Sahu

Try this -

尝试这个 -

 $scope.object = {letter_content:null};

  {{object .letter_content}}
    <div ng-if="formData['page_number'] == 1 ">
        {{letter_content}}
        <textarea id="froala-sample-2" froala="froalaOptions" ng-model="object .letter_content"></textarea>
    </div>