如何在使用 ng-bind-html 呈现的可编辑 DIV 中对文本进行 ng 建模？

Question

我正在 div 中呈现 HTML 文本，然后我将其设为可编辑。用户可以修改文本，但是有没有办法取回在 HTML 中修改的文本？

这是 fiddle 我正在努力工作的：

<div ng-controller="MyCtrl">
Hello, {{name}}!
<div class="editable" ng-bind-html="documentBody"></div>
</div>

控制器：

var myApp = angular.module('myApp', []);
        function MyCtrl($scope) {
            $scope.name = 'Superhero';
            $scope.documentBody = '<p align="center"><font size="2">Ciao</font></p><br><p align="center"><font size="2">Bello!</font></p>';
            $('.editable').each(function () {
                this.contentEditable = true;
            });
        }

http://jsfiddle.net/sirfabio80/5sr8wnzv/

提前致谢法比奥

Answer 1

使用如下指令。我们不能像你期望的那样编辑，我们必须以某种简单的方式使用 ng-model。

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

myApp.controller('MyCtrl',function ($scope, $sce) {
    $scope.name = 'Superhero';
    $scope.names = [{name:"Ciao"},{name:"Bello"},{name:"Allo"}];           
});
myApp.directive('dirNew', function(){
return {
restrict:"EA",
scope:{repeats:"=",},
template:'<p align="center" ng-repeat="n in repeats"><span size="2" ng-click="click($index)" ng-hide="n.enabled">{{n.name}}</span><input type="text" ng-show="n.enabled" ng-model="n.name"><button ng-show="n.enabled" ng-click="click($index)">Ok</button></p><br>',
link: function(scope) {
      scope.click = function(index){
      scope.repeats[index].enabled = !scope.repeats[index].enabled; 
      }
    }
}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-sanitize.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">{{names}}
<br>
  Hello, {{name}}!<br>
  Click the text and Edit......
  <dir-new repeats="names"></dir-new>
</div>
</body>

如何在使用 ng-bind-html 呈现的可编辑 DIV 中对文本进行 ng 建模？

How to ng-model a text in a editable DIV rendered with ng-bind-html?

javascript

angularjs

ng-bind-html

angularjs-ng-model