Question

我希望创建 mardown指令（限制A），这样我就可以使用 ng-view 的相同收件人。因此，我基本上只会在视图中加载.md文件，并在每次ng-view更改时对其内容应用我的函数。所以：

的index.html

<div markdown ng-view></div>

包含两个视图，例如 view1.md

#That should be h1

和 view2.md

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

Answer 1

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，父级等等你应该绝对清理。

Answer 2

在指令中使用$stateChangeSuccess事件而不是设置自己的$ watch可能更干净。尝试向$stateChangeSuccess事件添加一个回调函数，这应该深入到你的指令范围。

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

Answer 3

您只能在范围内观看变量。

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

如果要监视DOM元素的更改，则需要自行完成。

AngularJS：在指令中监视element.html（）

3 个答案: