Question

我正在尝试观看ng-html-bind的内容并修改div内容以自动链接div中的所有超链接，因为原始内容不会有超链接html。

这是指令

app.directive('autolink', ['$compile', '$timeout', function ($compile, $timeout) {
    return {
        restrict: 'EA',
        replace: true,
        link: function (scope, element, attrs) {

            $timeout(function () {
                var text = element[0].innerHTML;
                var linkTypes = ["http://", "https://"];
                linkTypes.forEach(function (linkType) {
                    var startSpace = 0;
                    while (startSpace >= 0) {
                        text = element[0].innerHTML;
                        var locationOfHttp = text.indexOf(linkType, startSpace);
                        if (locationOfHttp < 0) break;
                        var locationOfSpace = text.indexOf(" ", locationOfHttp);
                        var textAfter = "";
                        if (locationOfSpace < 0) {
                            locationOfSpace = text.length;
                        } else {
                            textAfter = text.substring(locationOfSpace, text.length);
                        }
                        var linkUrl = text.substring(locationOfHttp, locationOfSpace);
                        var htmlText = text.substring(0, locationOfHttp) + '<a href="' + linkUrl + '">' + linkUrl + '</a>' + textAfter;
                        element[0].innerHTML = htmlText;
                        startSpace = (text.substring(0, locationOfHttp) + '<a href="' + linkUrl + '">' + linkUrl + '</a>').length - 1;
                    }
                });
                scope.$apply();
                console.log("autolink");

            }, 1);
        },
    };
}]);

我的指令在页面加载时工作，但是当我点击更改URL时，div不是自动链接。如何监视更改并在更改时运行指令？

Answer 1

因此，您可以使用scope.$watch()来监视范围变量的更改，通过链接创建功能运行它，然后将其重新添加到元素中。

Here是你的插件的一个分叉，就是这样。

我通过使用隔离范围（Directive isolate scope）将ng-bind-html更改为自动链接，这允许将带有其中url的新文本传递给指令，其中范围为。$手表接管。通过使隔离范围变量与指令名称相同，您可以使用它来调用指令并将变量传递给它。

新的html：

<div autolink="parseResult(details)"></div>

以下是该指令的代码：

app.directive('autolink', ['$compile', '$timeout', function ($compile, $timeout) {
        return {
            restrict: 'EA',
            replace: false,
            // isolate scope below the html attribute 
            // unlinked-text is automatically translated 
            // to the scope variable unlinkedText by angular.
            scope: {
              autolink: '='
            }, 
            // added a template that uses ng-bind-html with
            // your new, link-ified text
            template: '<span ng-bind-html="text"></span>',
            link: function (scope, element, attrs) {
              scope.text = scope.autolink;
              function addLinks(str) {
                 var text = str;
                  console.log(text.match(/https?:\/\/\w*/));
                  var links_parsed = text
                  .replace(/https?:\/\/[\w\.\/]*/g, 
                          function(substr) { 
                            return '<a href="' + substr + '">' + substr + '</a>'; 

                          });
                  return links_parsed;
              }
              // Still using timeout for initial run of addLinks
              $timeout(function() { 
                scope.text = addLinks(scope.text);
              },0)
              // scope watches autolink variable
              scope.$watch('autolink', function(newVal, oldVal) {
                if(newVal !== oldVal) { // if variable has changed...
                  scope.text = addLinks(newVal); // ...runs addLinks() again
                }
              } );


            }
        };
    }]);

如何从指令中观看ng-html-bind？

1 个答案: