Question

我有一个文本对象，我想将它绑定到可编辑的范围，因为AngularJS提供对输入的双向绑定，但不提供跨度，我认为只是捕获关键事件并更新模型将很容易。这是我的模特：

angular.module("myApp", [])
    .controller("TextController", function ($scope, $http, $location, $interval) {
        $scope.myText = "my text";
        $scope.updateModel = function () {
            $scope.myText = $("#myspan").html();
        };
        ...
    });

这是我的范围：

<span id="myspan" contenteditable="true" ng-keyup="updateModel()" ng-bind="myText"></span>

我正在捕捉keyup事件并更新模型，但是光标会发生各种奇怪的事情（将跳转到开头）。有一种优雅的方式来做到这一点？我应该只使用输入还是textarea？我知道使用span是非正统的，但似乎在谷歌文档中工作正常。

Answer 1

请在下面的代码中找到答案：

在这里，你包括jQuery，我建议使用角度功能，如下所示。

大多数情况下，我们在AngularJS中使用带有ng-model的输入标签进行双向数据绑定。

angular.module("myApp", [])
  .controller("TextController", function($scope, $http, $location, $interval) {
    $scope.myText = "my text";
    $scope.updateModel = function() {
      $scope.myText = 'abc';
    };
  $scope.myValue = 'First value'
  });

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angularjs@1.5.7" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="TextController">
    <h1>Hello Plunker!</h1>
    <label>Span Value: </label>
    <span id="myspan" contenteditable="true" ng-keyup="updateModel()" ng-bind="myText"></span><br><br><br>
    <input type="text" name="myValue" ng-model="myValue" ><br><br>
    {{myValue}}
  </body>

</html>

我希望它可以帮到你。

干杯！

AngularJS - 双向绑定范围

1 个答案: