Javascript AngularJS:Watch element.html（）在指令中

我希望创建一个mardown指令（限制a），使我能够将同一个收件人用于ng视图。因此，我基本上只在视图中加载.md文件，并在每次ng视图更改时对其内容应用我的函数。因此：

index.html

<div markdown ng-view></div>

和view2.md

#That should be h1

##That should be h2, no ?

我的实际代码是

'use strict';
angular.module('btford.markdown', []).
  directive('markdown', function () {
    var converter = new Showdown.converter();

    return {
        restrict: 'A',
        link: function (scope, element, attrs) {

            scope.$watch(element.html(), function(value) {
                    var htmlText = converter.makeHtml(element.html());
                    element.html(htmlText);
            });

            var htmlText = converter.makeHtml(element.text());
            element.html(htmlText);
        }
    }
});

---

您只能在您的作用域上查看变量

scope.foo = 'bar';
scope.$watch('foo', function(newValue) {
  // Code to execute here
});

---

如果您想监视DOM元素的变化，您需要自己完成这项工作。

watch的第一个参数可以是一个函数，返回您想要的任何值，包括$element.html（）。您甚至可以组合数据

$scope.$watch(
    function() { return $element.attr("abc") + $scope.variable + someinternalvar; },
    function(newVal, oldVal) { doTheStuff(); }
);

显然，你在这里输入的数据越密集，你的手表就会越慢。小心点

--供参考

您应该清理监视程序，创建一个数组，并将$scope.$watch的结果推送到该数组中。然后在$destroy消息上删除它们。还请记住取消绑定事件，因为在创建和销毁作用域时，它们最终会导致性能问题

$document.bind('click', clickMe);
$(window).on("resize", winResize);

var watches = []

watches.push($scope.$watch("thing", function() { Thing(); }));

$scope.$on("$destroy", function () {
    for (var i in watches) watches[i]();
    $document.unbind('click', clickMe);
    $(window).off("resize", winResize);
});

--编辑2016-07-14

---

另外，不需要清理作用域观察程序，因为它们已经在内部处理过了，但是rootScope、parent等都应该进行清理。

在指令中使用

$stateChangeSuccessuccess

事件可能比设置自己的$watch更干净。尝试将回调函数添加到

$statechangesuccessuccess

事件中，这应该会进入指令的范围

'use strict';

angular.module('btford.markdown', []).
  directive('markdown', function () {
    var converter = new Showdown.converter();

    return {
        restrict: 'A',
        link: function (scope, element, attrs) {

            // When the state is change to, or reloaded...
            scope.$on('$stateChangeSuccess', function () {
                var htmlText = converter.makeHtml(element.text());
                element.html(htmlText);
            });
        }
    }
});

---

问题是什么？什么不起作用？问题是如何将转换函数应用于通过ng view加载的内容我想监控通过ng view对我的mardown元素内容所做的更改。实际上，这意味着观看路线。。。所以我需要能够在我的directiveMinor校正中观察route，根据您的示例，您不仅可以观察范围属性，还可以观察任何函数的输出（

scope.$watch（someFunc，function（newVal，oldVal）{}；

）。所以。。。这个答案是不正确的。正如Anton所说，我刚刚对它进行了测试，您可以执行`scope.$watch（function（）{return element.html（）；}，function（newVal，oldVal）{/*Code here*/}）；只要元素的html发生变化，就会调用函数。