0

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

索引.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);
        }
    }
});
4

3 回答 3

3

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

于 2015-07-08T19:59:08.270 回答
0

在指令中使用$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);
            });
        }
    }
});
于 2015-09-10T20:47:27.213 回答
-1

您只能在您的范围内观察变量。

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

如果你想监控 DOM 元素的变化，你需要自己做。

于 2013-05-16T15:17:05.090 回答