AngularJS：在指令中監視element.html（）

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

第一個監視參數可以是一個函數，返回你想要的任何值，包括你的$ 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元素的更改，您需要自己執行此操作。