时间戳

首页 > 解决方案 > angular.js 数据仅显示最近的参考

javascript - angular.js 数据仅显示最近的参考

问题描述

我想要多个文本元素，通过函数动态添加，键控始终显示输入文本字段的内容。相反，绑定的文本仅显示在最近添加的文本元素上，而所有其他文本元素都会消失（？）。即使是我引用的正文中写入的原始 span 标签也不再更新到用户提供的数据（不是说您可以在下面的示例中说出最后一部分，因为它是隐藏的）。

w3school 代码在这里运行：https ://www.w3schools.com/code/tryit.asp?filename=GD4AV18UABPF

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <body>

  <div ng-app="">
 <script>
    function linkPairing() {
        var divElement = angular.element(document.querySelector('.transaction'));
        var $hidden = angular.element(document.querySelector('.hiddenNodeName'));

        divElement.append($hidden);
        divElement.append("<br />");
    }   
  </script>

  <p>Input something in the input box:</p>
  <form>
  <p>Name: <input type="text" ng-model="newNodeName"></p>
  <p>{{newNodeName}}</p>
  <p>{{newNodeName}}</p>
  <button class="addNewTransaction" id="addNewTransaction" type="button" onclick="linkPairing()">Go</button>                
  </form>
  <div hidden><span class="hiddenNodeName" >{{newNodeName}}</span></div>
  <p class="transaction"></p>

  </div>

</body>
</html>

我意识到这种用于添加绑定数据引用的隐藏标记方法可能是非常规的，并且根据其他问题，显示的引用通常可能由以下内容生成：

var $div = $("<span>{{newNodeName}}</span>");
divElement.append($compile($div)($scope));
$scope.$apply();

我尝试了上面的变体，但甚至无法获得示例中看到的部分成功。我怀疑我需要对角度有更深入的了解，尤其是范围，才能通过这种方法取得成功。我同时使用 jquery 和 angular，并阅读 stackOverflow 的意见以将 js 模块负载降至最低。最初一切都在 jquery 中，但是当我使用具有链接数据显示的特殊功能时，Angular 中的 ng-bind 数据看起来非常吸引人。由于不确定我最终是否会成功，我现在不愿意将所有内容重构为 angular.js。这个变通办法可以按我的预期运行吗？

标签： javascriptjqueryangularjs

解决方案

这是工作示例：https ://www.w3schools.com/code/tryit.asp?filename=GD4KGYTO3RCF

还有一个片段

<!DOCTYPE html>
<html>
   <!--module starts surrounds body tag name is myapp -->
  <body ng-app="myapp">
  <!--controller surrounds the  div tag ,A controller is associated with module for functionality purpose-->
  <div ng-controller="myctrl">
  <form >
  Input something in the input box <br><br>
  Name: <input type="text" ng-model="newNodeName">
  <!-- we use ng click  for click in angular js -->
  <button  id="btn-newTransation" type="button"                		
  ng-click="linkPairing()">Go</button>
  
  </form>
  <!-- ng-repeat repeats the html inside it , nodes is array, node is each iteration's value , track by $index to avoid duplication error and get index
  ng-repeat="node in nodes"
  -->
  <!--ng repeat usually expects array but to just repeat an element some time this will work as shortcut-->
  <div ng-repeat="x in [].constructor(count) track by $index" class="nodes">
   <p>{{newNodeName}}</p>
  </div>
  {{message}}
  <!-- i dont know why are you using following tags for -->
  <div hidden>
  <span class="hiddenNodeName">{{newNodeName}}</span></div>
  <p class="transaction"></p>
  </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script>
    //initializing the myapp with controller
    angular.module("myapp",[]).controller("myctrl",function($scope){
    //variables in $scope are accessible in html example inside interpolation {{newNodeName}}
     $scope.message="";
    $scope.count=0;
	$scope.linkPairing=function(){ 
     $scope.count++;
     if($scope.count==3){
       $scope.message="Did it work? if it worked please upvote and mark it as correct "
	 }
     }
    });	
</script>
</body>
</html>

推荐阅读