等效于 AngularJS 中 jQuery 的 html()答案

【问题标题】：Equivalent for jQuery's html() in AngularJS等效于 AngularJS 中 jQuery 的 html()
【发布时间】：2015-05-24 20:32:19
【问题描述】：

<div id="block">
<p>some value</p>
<div>tons of stuff</div>
<li>etc</li>
</div>

在 jQuery 中，我们可以做到var getHtml = $("#block").html();，但我们如何在 AngularJS 中做到这一点？我只知道我们可以使用 ng-model 进行绑定，但是我们是否在数百个 HTML 标签上声明了许多 ng-model？

澄清一下：我想将生成的 HTML 保存到我的本地存储中，我不想混淆 AngularJS 和 jQuery。

【问题讨论】：

使用 Angular 时应该问自己的第一个问题是，我为什么要直接访问 DOM 元素？你在这里的目标是什么？如果是修改视图，则应通过修改要更改的视图的 $scope.xxx 值来处理。如果您仍然想要访问，您可以通过在控制器中执行 $("#someid", $element) 来混合 angularjs 和 jquery。
@MarvinSmit 我想将一些值（html）存储到我的本地存储中。
您应该只存储数据，而不是呈现数据的 HTML（数据和模板的混合）。 *除非“HTML”是编辑器控件的内容（这会使 HTML 成为“数据”）。
我认为您应该阅读 MVC/MVP/MVVM 模式。听起来您使用 angular 是因为您“必须”，而不是因为您看到应用模式的好处。
Marvin 我同意你的观点，这听起来与 angular 的含义背道而驰，但我们不知道他的问题的范围是什么，所以在不了解更多信息的情况下说使用 .html 是不好的问题是错误的。

标签： javascript jquery html angularjs

【解决方案1】：

根据 AngularJS 文档，您应该可以使用 html()，除非我遗漏了什么？

您必须使用.element() 函数来获取 jQuery 或 JqLite 对象：

var content = angular.element('#fooid').html();

【讨论】：

好吧，我知道我的回答可能不是 Angular 的精神，但是如果你需要在 DOM 上做点什么，为什么不直接使用 jquery、jqlite 或 DOM 呢？
使用 javascript 和 angular 也可以，但是当你将 jquery 和 angularjs 混合使用时就过分了
我不明白，你为什么这么认为？根据文档docs.angularjs.org/api/ng/function/angular.element 引用：Note: all element references in Angular are always wrapped with jQuery or jqLite; they are never raw DOM references.
从来没有说过你做过:)
但实际上，根据文档，您应该能够将 jQuery 与 Angular 一起使用。如果.html() 不适合你，也许你的代码有其他问题......

【解决方案2】：

您可以制作自定义指令试试这个：

angular.module("myApp", [])
  .controller("myController", function($scope, $timeout) {
    $scope.text = "myText";
    $timeout(function() {
      $scope.text = "newText"
    }, 3000);
  })
  .directive("html", function() {
    return {
      scope: {
        html: '='
      },
      link: function(scope, element, attrs) {
        scope.$watch(function() {
          return element.html();
        }, function(newVal, oldVal) {
          console.log(newVal)
          scope.html = newVal;
        })
      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="test = ''">
  <div html="test">{{text}}</div>
  <div>{{test}}</div>
</div>

抱歉第一个错误答案:)

【讨论】：

他要求一种方法将元素内容作为 HTML 字符串获取，而不是将其绑定到 DOM...