0

我正在尝试实现以下目标（http://jsfiddle.net/EM8hr/2/），仅作为示例

<section ng-app="Myapp">
    <ul ng-controller="MainController">
        <li ng-repeat="link in links">
            {{link}}
        </li>
    </ul>
</section>

角度：

Myapp = angular.module("Myapp", [])

Myapp.controller("MainController", function($scope){
  $scope.links = ["http://www.google.com", "http://www.youtube.com/watch?v=Oy1WqQbqKpA"]
});

Myapp.directive("videolink", function(){
    return {
        restrict: "E",
        compile: function(element, attrs) {
            element.text(attrs.src.replace(/www\./gi,""))
        }
    }
});

但无法达到预期的响应。我知道这必须与指令的链接和范围属性一起使用，但我无法弄清楚它的正确方式。有人可以帮忙吗？( http://jsfiddle.net/tRG4T/ )

Myapp.directive("videolink", function(){
    return {
        restrict: "E",
        replace: false,
        scope: {src:"@"},
        link: function(scope, element, attrs) {
            return  attrs.src.replace(/www\./gi,"")
        }
    }
});
4

1 回答 1

1

我认为您可以简单地使用一个函数来剥离您的网址，每次修改都会调用该函数（在链接函数中，数据未绑定，因此您将尝试在未定义的内容上替换字符串）

小提琴在这里：http: //jsfiddle.net/DotDotDot/EM8hr/5/

例如，您可以像在第二个示例中那样将 src 属性添加到您的指令中，并以这种方式调用它：

    <li ng-repeat="link in links">
        <videolink src='{{link}}'></videolink>
    </li>

然后在指令方面，你可以做这样的事情

return {
    restrict: "E",
    scope:{src:"@"},
    replace:false,
    template:'{{stripW(src)}}',
    link:function(scope, elt,attr){
        scope.stripW=function(url){
             return url.replace(/www\./gi,"");   
        }
    }
}

你在范围内定义一个函数来做你想做的事（在这里，去掉 URL 的 www 部分），然后将它绑定到模板中。将url传递给函数时，会修改src，这将触发函数，并正确替换您的文本

玩得开心

于 2013-08-03T11:14:41.493 回答