Angular 1.5 Component: passer une fonction

Est-il possible de passer d'une fonction à un composant et à l'appel de cette fonction à l'intérieur du composant le passage d'un paramètre?

Exemple:

Liste des postes

<post-list posts="blog.posts"
           loading="blog.loadingPosts"
           get-post-url="blog.getPostUrl" 
           is-user-authenticate="blog.user">
</post-list>

getPostUrl est une fonction (à l'intérieur du conteneur contrôleur):

const getPostUrl = (postId) => {
    const protocol = $location.protocol();
    const host = $location.host();
    const port = $location.port();

    return protocol + "://" + host + "" + (port !== 80 ? ":" + port : "") + "/blog/post/" + postId;
};

Liste de postes: composant

const PostList = {
  "bindings": {
    "posts": "<",
    "loading": "<",
    "getPostUrl": "&", //Function getPostUrl
    "isUserAuthenticate": "<"
  },
  "template": `<div>
                <div class="col-md-9 text-center" data-ng-if="$ctrl.loading">
                  <i class="fa fa-spinner fa-spin fa-2x"></i>
                </div>

                <div class="col-md-9 posts" data-ng-if="!$ctrl.loading">
                  <div data-ng-repeat="post in $ctrl.posts">
                    <post creation-date="{{post.creationDate}}"
                          content="{{post.content}}"
                          post-url="{{$ctrl.getPostUrl(post.creationDate)}}"
                          is-user-authenticate="$ctrl.user">
                    </post>
                  </div>
                </div>
              </div>`,
   "transclude": false
};

 angular
  .module("blog")
  .component("postList", PostList);

Dans cette ligne:

post-url="{{$ctrl.getPostUrl(post.creationDate)}}" Je veux appeler la fonction en passant un paramètre et cette fonction retourne un chaîne.

Dans post composant (pas PostList) le postUrl est un attribut de chaîne @.

Mais... ne fonctionne pas!

angulaire.js:13550 Erreur: [$interpoler:interr] ne Peut pas interpoler: {{$ctrl.getPostUrl(la poste.creationDate)}}
TypeError: Impossible d'utiliser un 'dans' l'opérateur de la recherche pour "blog" dans 1459329888892
Erreur De Lien

Est-il possible de le faire? Et comment?

Merci beaucoup!

source d'informationauteur Aral Roca

  1. 5

    Si vous voulez appeler la fonction à partir de l'intérieur d'un composant et l'ont renvoyer une valeur, alors vous devez liaison bidirectionnelle:

    "bindings": {
  "posts": "<",
  "loading": "<",
  "getPostUrl": "=", //<-- two-way binding
  "isUserAuthenticate": "<"
},

    Cependant, ce n'est probablement pas une très bonne idée. Envisager de transmettre les données de la composante plutôt que de faire de la composante de la demande des données à partir de l'extérieur. Cela va faire beaucoup mieux isolé de la composante.

  2. 14

    Vous pouvez passer des fonctions de composants, mais vous devez définir les arguments de la fonction d'objet avec les bons arguments noms de ses touches.
    exemple:

    <post-list posts="blog.posts"
           loading="blog.loadingPosts"
           get-post-url="blog.getPostUrl(postId)" 
           is-user-authenticate="blog.user">
</post-list>

const PostList = {
 "bindings": {
  "posts": "<",
  "loading": "<",
  "getPostUrl": "&", //Function getPostUrl
  "isUserAuthenticate": "<"
 },
 "template": `<post creation-date="{{post.creationDate}}"
                      content="{{post.content}}"
                      post-url="{{$ctrl.getPostUrl({postId:post.creationDate})}}">
                </post>