निम्नलिखित कार्य और कंसोल डॉट "पोस्ट" ऑब्जेक्ट को लॉग करता है, लेकिन मैं कंट्रोलर फ़ंक्शन "आइटमक्लिक" के निर्देश में एंकर टैग के यूआरएल को कैसे पास करूं?

एचटीएमएल:

<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);
        }
      }
    }
  };
}
0
Hungry Beast 27 मई 2017, 06:43

2 जवाब

सबसे बढ़िया उत्तर

ऐसा लगता है कि मैं जो याद कर रहा था वह था कि नियंत्रक पर linkClickedCallback फ़ंक्शन में तर्कों को कैसे पास किया जाए। आपको किसी ऑब्जेक्ट {arg1: 5, arg2: 10} के माध्यम से फ़ंक्शन में तर्कों को पारित करने की आवश्यकता है और फिर उन्हें नियंत्रक के साथ पास करने के लिए HTML में फ़ंक्शन में उन्हें उसी क्रम में जोड़ना होगा।

मैंने लिंकक्लिकेड कॉलबैक में पास करने के लिए ऑब्जेक्ट {लिंक: 1} बनाया है जहां 1 एक हार्ड कोडित मान है। जब उदाहरण चलता है तो यह 1 आउटपुट करता है और निम्न पंक्ति पर 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);
        }
      }
    }
  };
}

मुझे अभी भी लिंक वैल्यू को कैप्चर करने और हार्ड कोड "1" के बजाय पास करने के लिए कुछ काम करने की ज़रूरत है, लेकिन यह दिखाता है कि इसे कैसे करने की आवश्यकता है।

0
Hungry Beast 30 मई 2017, 05:09

$scope.$emit और $scope.$on के साथ इसे लागू करना आसान है।

आपके निर्देश में:

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

आपके नियंत्रक में:

$scope.$on('passUrl', function (event, data) {
  $log.debug(data); // received urlToPass variable from directive
})
0
Commercial Suicide 27 मई 2017, 15:37