Angular指令将参数传递给控制器​​函数在元素的.html（）

Question

下面的工作和控制台点记录“post”对象，但是如何将指令中锚点标记的url传递给控制器​​函数“itemClicked” ？

HTML：

<div ng-repeat="post in posts" > 
    <div find-urls link-clicked="itemClicked(post)" ng-bind="post.content"><div> 
</div> 

控制器：

$scope.itemClicked = function(post) { 
    console.log(post); 
}; 

指令：

function findUrls($compile) { 
    return { 
    restrict: 'AC', 
    scope: { 
     linkClickedCallback: '&linkClicked' 
    }, 
    link: function (scope, elem, attrs) { 
     if (attrs.ngBind) { 
     scope.$watch(attrs.ngBind, _.debounce(wrapUrls)); 
     } 
     if (attrs.ngBindHtml) { 
     scope.$watch(attrs.ngBindHtml, _.debounce(wrapUrls)); 
     } 

     function wrapUrls(text) { 
     var linkPatterns = new Array({ 
      pattern: /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, 
      template: '&nbsp;<a class="absolute_link" href="$1" target="_blank">$1</a>' 
     }, 
     { 
      pattern: /(^|[^\/])(www\.[\S]+(\b|$))/ig, 
      template: '&nbsp;<a class="absolute_link" href="http://$2" ng-click="linkClickedCallback();" target="_blank">$2</a>' 
     }, 
     { 
      pattern: /([a-z0-9._-]+@[a-z0-9._-]+\.[a-zA-Z0-9._-]+)/ig, 
      template: '&nbsp;<a class="absolute_link" href="mailto:$1" ng-click="linkClickedCallback();" target="_blank">$1</a>' 
     }, 
     { 
      pattern: /(^|[^a-z0-9@\\\/._-])([a-z0-9]{0,256}\.(com|net|org|edu)([a-z0-9\/?=\-_#]{0,256})?(\b|$))/ig, 
      template: '&nbsp;<a class="absolute_link" href="http://$2" ng-click="linkClickedCallback();" target="_blank">$2</a>' 
     }); 

     var html = elem.html(); 
     var newHtml = html; 

     linkPatterns.forEach((item) => { 
      newHtml = newHtml.replace(item.pattern, item.template); 
     }); 

     if (html !== newHtml) { 
      elem.html(newHtml); 
      $compile(elem.contents())(scope); 
     } 
     } 
    } 
    }; 
} 

Answer 1

它看起来像我错过了什么是如何将参数传递到控制器上的linkClickedCallback功能。您需要通过对象{arg1：5，arg2：10}将参数传递给函数，然后将它们按照相同的顺序添加到HTML中的函数中，以将它们传递给控制器​​。

我已经创建了要链接到linkedClickedCallback的对象{link：1}，其中1是一个硬编码值。当该示例运行时，它输出1，并在下面一行中定义HTML中的“post”对象。

HTML：

<div ng-repeat="post in posts" > 
    <div find-urls link-clicked="itemClicked(link, post)" ng-bind="post.content"><div> 
</div> 

控制器：

$scope.itemClicked = function(link, post) { 
    console.log(link); 
    console.log(post); 
}; 

指令：

function findUrls($compile) { 
    return { 
    restrict: 'AC', 
    scope: { 
     linkClickedCallback: '&linkClicked' 
    }, 
    link: function (scope, elem, attrs) { 
     if (attrs.ngBind) { 
     scope.$watch(attrs.ngBind, _.debounce(wrapUrls)); 
     } 
     if (attrs.ngBindHtml) { 
     scope.$watch(attrs.ngBindHtml, _.debounce(wrapUrls)); 
     } 

     function wrapUrls(text) { 
     var linkPatterns = new Array(
     { 
      pattern: /(^|[^\/])(www\.[\S]+(\b|$))/ig, 
      template: '&nbsp;<a class="absolute_link" href="http://$2" ng-click="linkClickedCallback({link: 1});" target="_blank">$2</a>' 
     }, 
     { 
      pattern: /([a-z0-9._-]+@[a-z0-9._-]+\.[a-zA-Z0-9._-]+)/ig, 
      template: '&nbsp;<a class="absolute_link" href="mailto:$1" ng-click="linkClickedCallback({link: 1});" target="_blank">$1</a>' 
     }, 
     { 
      pattern: /(^|[^a-z0-9@\\\/._-])([a-z0-9]{0,256}\.(com|net|org|edu)([a-z0-9\/?=\-_#]{0,256})?(\b|$))/ig, 
      template: '&nbsp;<a class="absolute_link" href="http://$2" ng-click="linkClickedCallback({link: 1});" target="_blank">$2</a>' 
     }); 

     var html = elem.html(); 
     var newHtml = html; 

     linkPatterns.forEach((item) => { 
      newHtml = newHtml.replace(item.pattern, item.template); 
     }); 

     if (html !== newHtml) { 
      elem.html(newHtml); 
      $compile(elem.contents())(scope); 
     } 
     } 
    } 
    }; 
} 

我还需要ŧ o做一些工作来捕获链接值并将其传递，而不是硬编码的“1”，但这显示了它需要如何完成。

Answer 2

很容易实现$scope.$emit和$scope.$on。

在你的指令：

scope.$emit('passUrl', urlToPass); 

在你的控制器：

$scope.$on('passUrl', function (event, data) { 
    $log.debug(data); // received urlToPass variable from directive 
})