AngularJS将数据传递给Javascript变量并且相反

Question

我正在寻找一个解决方案，将数据从特定的输入文本字段传递到AngularJS。它也可能是一个Javascript变量。如果变量是从javascript代码内部更改的，则不会在AngularJS端更新。如果我采用相同的变量，并在文本字段中添加至少一个字符或修改一些东西，我看到变量更新和一切正常工作。

我尝试使用angular.element（document.getElementById（'ControllerElementID'））。scope（）。funct（）;但仍然没有运气。当我从键盘更新至少一个字段时，与“ng-model =”sig.sigBase6422“”相关的所有文本字段都正确更新。如果我通过JavaScript函数调用此更新，我只会看到特定文本字段的更新，并且在ng模型发生时根本没有更新。如何使其更新尽可能简单？下面我将发布一个小例子。我能够将数据从变量存储到外部文件，并在AngularJS中从文件中读取并使用它。这太漫长，复杂和荒谬。我相信应该有更好的方法。

谢谢！

<script type="text/javascript">
function addtext1() {document.getElementById("myID1").value = "1111111111111111";}
function addtext2() {document.getElementById("myID2").value = "2222222222222222";}
</script>

<div>
    <form action="#" name="FORM1">
    <TEXTAREA NAME="sigData" ng-model="sig.sigBase6422" ROWS="10" COLS="20">String: </TEXTAREA>
    </form><br>
    <input type="text" name="myID1" id="myID1" ng-model="sig.sigBase6422" ><br>
    <input type="text" name="myID2" id="myID2" ng-model="sig.sigBase6422" ><br>
    <p>Value {{sig.sigBase6422}}!</p>
</div>

<!-- test field -->
<a href="javascript:addtext1()">Add text 1</a>
<a href="javascript:addtext2()">Add text 2</a>

Answer 1

更新值时使用此代码。

首先使用选择控制器

var scope = angular.element(document.getElementById('yourControllerElementID')).scope();
scope.<variablename> = <your operation>;

然后

scope.$apply();

剩下的东西将由Angular照顾。

Answer 2

你似乎误解了棱角是如何工作的。你要做的不是角度是如何工作的。您尝试使用原生JavaScript可以使用角度来完成。 Angular可以更新dom和Dom更新角度，因为它负责导致更新......无论如何都不会更深入。您需要阅读有关角度如何工作的更多信息，并尝试在角度范围内而不是混合中进行sticl。

话虽如此：更新其值后，跳转更改Dom元素。或者更好的是，可以访问Dom上的范围变量，并使用您的值调用角度函数，并从角度内部设置它们的值。

Answer 3

实际上，如果你想使用AngularJS来创建它，你必须使用directive或controller完全重写你的代码。您可以从视图访问的变量和函数也应附加到$scope。

var myApp = angular.module("myApp", []);

myApp.controller("myCtrl", function($scope){
    
    $scope.addtext1 = function () {
        $scope.sig.sigBase6422 += "1111111111111111";
    };
    $scope.addtext2 = function () {
        $scope.sig.sigBase6422 += "2222222222222222";
    };

    $scope.sig = {
        sigBase6422: ""
    };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
    <form action="#" name="FORM1">
        <TEXTAREA ng-model="sig.sigBase6422" ROWS="10" COLS="20">String: </TEXTAREA>
    </form><br/>
    <input type="text" name="myID1" id="myID1" ng-model="sig.sigBase6422" /><br/>
    <input type="text" name="myID2" id="myID2" ng-model="sig.sigBase6422" /><br/>
    <p>Value {{sig.sigBase6422}}!</p>

    <!-- test field -->
    <button ng-click="addtext1()">Add text 1</button>
    <button ng-click="addtext2()">Add text 2</button>
</div>