Javascript 如何从指令查看ng html绑定？

我正在尝试观察ng html绑定的内容，并修改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);
        },
    };
}]);

app.directive（'autolink'，['$compile'，'$timeout'，函数（$compile，$timeout）{
返回{
限制：“EA”，
替换：正确，
链接：函数（范围、元素、属性）{
$timeout（函数（）{
var text=元素[0]。innerHTML；
var linkTypes=[“http:/”，“https:/”]；
linkTypes.forEach（函数（linkType）{
var startSpace=0；
while（开始空间>=0）{
text=元素[0]。innerHTML；
var locationofhtp=text.indexOf（linkType，startSpace）；
如果（Http<0的位置）断裂；
var locationOfSpace=text.indexOf（“”，locationofhtp）；
var textfafter=“”；
if（空间位置<0）{
locationOfSpace=text.length；
}否则{
textfeater=text.substring（空间位置，text.length）；
}
var linkUrl=text.substring（locationofhtp，locationOfSpace）；
var htmlText=text.substring（0，位置Http）+''+textAfter；
元素[0]。innerHTML=htmlText；
startSpace=（text.substring（0，位置Http）+''）。长度-1；
}
});
作用域：$apply（）；
控制台日志（“自动链接”）；
}, 1);
},
};
}]);

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

这样，您可以使用监视范围变量的更改，通过链接创建函数运行它，然后将其添加回元素中

就是你的叉子，就是这么做的

通过使用隔离作用域（），我将ng bind html更改为自动链接，这允许将包含URL的新文本传递给指令，指令由作用域$watch接管。通过使隔离范围变量与指令名称相同，您可以使用它来调用指令并向其中传递变量

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


            }
        };
    }]);

app.directive（'autolink'，['$compile'，'$timeout'，函数（$compile，$timeout）{
返回{
限制：“EA”，
替换：false，
//隔离html属性下的作用域
//未链接的文本将自动翻译
//到范围变量，按角度取消链接文本。
范围：{
自动链接：'='
}, 
//添加了一个使用ng绑定html的模板
//你的新的，链接文本
模板：“”，
链接：函数（范围、元素、属性）{
scope.text=scope.autolink；
函数addLinks（str）{
var text=str；
console.log（text.match（/https？：\/\/\w*/）；
var links_parsed=文本
.replace（/https？：\/\/[\w\.\/]*/g，
函数（substr）{
返回“”；
});
返回已解析的链接；
}
//仍在为addLinks的初始运行使用超时
$timeout（函数（）{
scope.text=addLinks（scope.text）；
},0)
//作用域监视自动链接变量
作用域：$watch（'autolink'，函数（newVal，oldVal）{
如果（newVal！==oldVal）{//如果变量已更改。。。
scope.text=addLinks（newVal）；/…再次运行addLinks（）
}
} );
}
};
}]);

在将html发送到视图之前，为什么不在控制器或服务中执行此操作？或者为其创建一个过滤器it@charlietfl：是的，我能做到。直到有人回答为止。既然这是一个显示的东西，思考指令将是一个很好的方法。对我来说没有意义…如果你知道它需要修改，为什么要等到它在DOM中才修改它呢？哈哈，@charlietfl，这比我的答案有效得多。@cm92你不同意根本不需要指令吗？似乎有些事情做得太过火了，只需提前一步就可以了。我们可以将文本传递给“自动链接”属性而不是未链接的文本吗？@TechCrunch我更新了答案。它现在使用与隔离范围变量相同的属性名称。因此，您可以直接在

autolink=”“

上传递新文本，如果您想看到它的实际运行，我还更新了plunkr。@cm02非常感谢。根据charlietfl的建议，现在我将直接在控制器中调用addLinks。但这个例子肯定会对我和其他人有所帮助。@cm02，你的addLinks函数在@TechCrunch中不包含超链接的abc是的，正则表达式在

/

之后没有捕获任何内容，现在应该修复，将

/https？：\/\/[\w\.]*/g

更改为

/https？：\/\/[\w\/]*/g

。