title: Angular 1.5 Component: passing a function
body: <p>Is it possible to passing a function to a component and call this function inside the component passing a parameter?</p>
  
  <p>Example:</p>
  
  <p><strong>List of posts</strong></p>
  
  <pre><code>&lt;post-list posts="blog.posts"
             loading="blog.loadingPosts"
             get-post-url="blog.getPostUrl" 
             is-user-authenticate="blog.user"&gt;
  &lt;/post-list&gt;
  </code></pre>
  
  <p><strong>getPostUrl</strong> is a function (<em>inside the container controller</em>):</p>
  
  <pre><code>const getPostUrl = (postId) =&gt; {
      const protocol = $location.protocol();
      const host = $location.host();
      const port = $location.port();
  
      return protocol + "://" + host + "" + (port !== 80 ? ":" + port : "") + "/blog/post/" + postId;
  };
  </code></pre>
  
  <p><strong>List of posts: component</strong></p>
  
  <pre><code>const PostList = {
    "bindings": {
      "posts": "&lt;",
      "loading": "&lt;",
      "getPostUrl": "&amp;", //Function getPostUrl
      "isUserAuthenticate": "&lt;"
    },
    "template": `&lt;div&gt;
                  &lt;div class="col-md-9 text-center" data-ng-if="$ctrl.loading"&gt;
                    &lt;i class="fa fa-spinner fa-spin fa-2x"&gt;&lt;/i&gt;
                  &lt;/div&gt;
  
                  &lt;div class="col-md-9 posts" data-ng-if="!$ctrl.loading"&gt;
                    &lt;div data-ng-repeat="post in $ctrl.posts"&gt;
                      &lt;post creation-date="{{post.creationDate}}"
                            content="{{post.content}}"
                            post-url="{{$ctrl.getPostUrl(post.creationDate)}}"
                            is-user-authenticate="$ctrl.user"&gt;
                      &lt;/post&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;`,
     "transclude": false
  };
  
   angular
    .module("blog")
    .component("postList", PostList);
  </code></pre>
  
  <p>In this line:</p>
  
  <p><code>post-url="{{$ctrl.getPostUrl(post.creationDate)}}"</code> I want to call the function passing a parameter and this function is returning a <strong>string</strong>.</p>
  
  <p><em>In <strong>post component</strong> (not PostList) the postUrl is a string attribute <code>@</code></em>.</p>
  
  <p>But... Is not working!</p>
  
  <blockquote>
    <p>angular.js:13550 Error: [$interpolate:interr] Can't interpolate: {{$ctrl.getPostUrl(post.creationDate)}}
    TypeError: Cannot use 'in' operator to search for 'blog' in 1459329888892
    <a href="https://docs.angularjs.org/error/$interpolate/interr?p0=%7B%7B$ctrl.getPostUrl(post.creationDate)%7D%7D&amp;p1=TypeError:%20Cannot%20use%20%27in%27%20operator%20to%20search%20for%20%27blog%27%20in%201459329888892" rel="noreferrer">Error Link</a></p>
  </blockquote>
  
  <p><strong>Is it possible to do it? And how?</strong></p>
  
  <p><em>Thank you so much!</em></p>