AngularJS:在指令中观察 element.html() [英] AngularJS : Watch element.html() in a directive

问题描述

我希望创建一个 ma​​rdown 指令(限制 A)，这将使我能够为 ng-view 使用相同的收件人.所以我基本上只会在视图中加载 .md 文件，并在每次 ng-view 更改时对其内容应用我的函数.所以:

index.html

有两个视图，比如说，view1.md

#那应该是h1

和view2.md

##那应该是h2，不是吗?

我的实际代码是

'use strict';angular.module('btford.markdown', []).指令('降价'，函数(){var converter = new Showdown.converter();返回 {限制:'A'，链接:函数(范围、元素、属性){scope.$watch(element.html(), function(value) {var htmlText = converter.makeHtml(element.html());element.html(htmlText);});var htmlText = converter.makeHtml(element.text());element.html(htmlText);}}});

解决方案

watch 的第一个参数可以是一个函数，返回任何你想要的值，包括你的 $element.html().你甚至可以做数据的组合

$scope.$watch(function() { return $element.attr("abc") + $scope.variable + someinternalvar;},函数(新值，旧值){ doTheStuff();});

显然，您输入的数据越密集，您的手表就越慢.谨慎使用.

--仅供参考

您应该清理您的观察者，创建一个数组并将 $scope.$watch 的结果推送到该数组中.然后在 $destroy 消息中删除它们.还要记住取消绑定事件，因为它们会在创建范围时导致最终的性能问题毁了.

$document.bind('click', clickMe);$(window).on("resize", winResize);var 手表 = []watch.push($scope.$watch("thing", function() { Thing(); }));$scope.$on("$destroy", function () {for (var i in watch) watch[i]();$document.unbind('click', clickMe);$(window).off("resize", winResize);});

-- 编辑 2016-07-14

补充一点，不需要清理作用域观察者，因为它们已经在内部处理了，但是 rootScope、父级等你应该绝对清理.

I am looking to create a mardown directive (restrict A) which would make me able to use same recipient for ng-view. So I would basically load only .md files in views and apply my function on its content each time ng-view change. So :

index.html

<div markdown ng-view></div>

with two views containing, let say, view1.md

#That should be h1

and view2.md

##That should be h2, no ?

My actual code is

'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);
        }
    }
});

解决方案

The first param of watch can be a function, return any value you want including your $element.html(). You can even do a combination of data

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

Obviously the more intense the data you put in here the slower your watches will be. Use caution.

-- FYI

You should clean up your watchers, create an array and push the results of $scope.$watch into that array. Then on the $destroy message remove them. Also remember to unbind events as they will cause eventual performance issues as scopes are created & destroyed.

$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);
});

-- EDIT 2016-07-14

Just to add, cleaning up scope watchers is not needed as they are already processed internally, however rootScope, parent, etc. you should absolutely cleanup.

这篇关于AngularJS:在指令中观察 element.html()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！