コントローラのスコープ内で関数を呼び出す角度指令

Question

ユーザーが投稿したテキストを検索し、URLをアンカータグに置き換えるAngularディレクティブがあります。

function findUrls($compile) { 
    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="alert(\'hello\')" 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="alert(\'hello\')" 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="alert(\'hello\')" target="_blank">$2</a>' 
    }); 

    return { 
    restrict: 'AC', 
    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 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); 
     } 
     } 
    } 
    }; 
} 

ユーザーがこれらのリンクの1つをクリックすると、そのクリックをキャプチャして、それが所属するオブジェクトに関する情報を記録できるようにしたいと考えています。しかし、これらのディレクティブはどのオブジェクトに属しているのかわからないので、クリックを記録するコードはコントローラ上で処理する必要があります。

コントローラにこれらの要素の1つがクリックされたことをコントローラに通知し、コントローラがオブジェクトのプロパティを記録するように指示しますが、どこから開始するのかわかりません。

Answer 1

あなたはディレクティブにコントローラ機能を渡すと、リンクが

return { 
    restrict: 'AC', 
    scope: {    // **** Add this ***** 
     alert: '&' 
    } 
    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 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); 
     } 
    } 
} 

<div DIRECTIVE_NAME alert="notify(msg)"></div> //controllers notify function

をクリックしたときに指令からそれを呼び出すことができます