AngularJS：手表element.html（）的指令 [英] AngularJS : Watch element.html() in a directive

问题描述

我期待创建一个 mardown指令（限制A），它会让我能够使用同一收件人的 NG-视图即可。所以，我基本上只加载.MD文件的意见和运用它的内容，每次NG-视图更改我的功能。所以：

的index.html

 ＆LT; D​​IV降价NG-视图＆gt;＆LT; / DIV＆GT;
 

含有两种观点，让说， view1.md

  #That应该是H1
 

和 view2.md

  ##这应该H2，不是吗？
 

我的实际code是

 使用严格的;
angular.module（'btford.markdown'，[]）。
  指令（'降价'，函数（）{
    VAR器=新Showdown.converter（）;    返回{
        限制：'A'，
        链接：功能（范围，元素，ATTRS）{            范围。$腕表（element.html（），功能（价值）{
                    变种的htmlText = converter.makeHtml（element.html（））;
                    element.html（的htmlText）;
            }）;            变种的htmlText = converter.makeHtml（element.text（））;
            element.html（的htmlText）;
        }
    }
}）;
 

解决方案

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

  $ scope.watch（
    函数（）{$返回element.attr（ABC）+ $ scope.variable + someinternalvar; }，
    函数（的newval，OLDVAL）{doTheStuff（）; }
）;
 

显然比较紧张，你把这里的数据速度越慢的手表会。谨慎使用。

- FYI

您应该清理你的观察家，创建一个数组，推动$范围的结果。$收看到该阵列。然后在$销毁消息删除它们。还记得解除绑定事件，因为它们会导致最终的性能问题，在创建和放大器范围;销毁。

  $ document.bind（'点击'，clickMe）;
$（窗口）。在（调整，winResize）;VAR手表= []watches.push（$ $范围腕表（东西，函数（）{事（）;}））;$范围。在$（$消灭，函数（）{
    对于（VAR我在手表）手表[I]（）;
    $ document.unbind（'点击'，clickMe）;
    $（窗口）.off（调整，winResize）;
}）;
 

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

这篇关于AngularJS：手表element.html（）的指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！