J'ai un composant super simple.

app.component('myComponent', {
  bindings: {
    data: "&"
  },
  templateUrl: 'elements/views/my-component.html',
  controller: function() {

    const lol = function() {
      alert("You did it noob!");
    }

    $ctrl.$onInit = function() {
            $ctrl.lol = lol;
    }
});

Maintenant, je veux créer un nouveau html, dans le dossier elements/views nommé my-component.html

Je devine quelque chose comme:

<div ???="my-component.html">
  <button ng-click="$ctrl.lol">Press it</button>
</div>

Que dois-je mettre sur le ??? en HTML, comment faire pour que ça marche?

Qu'est-ce que je rate?

Pour faire court, je dois créer un composant qui supprime le bouton, au cas où quelqu'un voudrait écrire une ligne de code plus.

1
joe123 13 avril 2018 à 15:00

3 réponses

Meilleure réponse

Vous devez attacher la méthode lol à ceci dans le contrôleur

angular.
  module('app',[]).
  component('myComponent', {
    template: '<div><button ng-click="$ctrl.lol()">Press it</button></div>',
    controller: function myCompCtrl() {
      this.lol = function() {
        alert("You did it noob!");
      };
    }
  });

Puis dans la vue

<div ng-app="app">
      <my-component></my-component>
    </div>

Voici un plunker

3
Marcus Höglund 13 avril 2018 à 13:29

Vous êtes proche, mais vous avez juste besoin de vous déplacer là où certains des morceaux sont définis.

// In your .js file
app.component('myComponent', {
    bindings: {
        data: "&"
    },
    templateUrl: 'elements/views/my-component.html',
    controller: function() {

        /*
        Note that inside your controller function
        you just use `this` to refer to it - it's
        a regular JavaScript constructor function.

        In your template you can reference the controller with `$ctrl`.
        */

        this.lol = function() {
            alert("You did it noob!");
        }

        this.$onInit = function() {

        }
    }
});


<!-- elements/views/my-component.html -->
<button ng-click="$ctrl.lol()">Press it</button>


<!--
In your main application template (*outside* my-component.html)
-->
<my-component>
</my-component>

Vous pouvez également appeler la liaison data depuis l'intérieur de votre modèle de composant en tant que $ctrl.data() (en supposant que vous vouliez la définir comme une expression? data: "&")

Voici un plongeur montrant cet exemple: https://plnkr.co/edit/yrFDMS?p=preview

0
Sly_cardinal 13 avril 2018 à 13:28

Vous pouvez essayer quelque chose comme ceci:

<div ng-app="exampleApp">
   <example></example>
</div>

Manette:

var exampleComponent = {
    controller: function (){
      var ctrl = this;

      ctrl.doSomething = function () {
        alert('You are awesome');
      };
    },

    template: `
            <div>
              <button ng-click="$ctrl.doSomething();">
              Click me
              </button>
            </div>`
};


angular.module('exampleApp', [])
  .component('example', exampleComponent)

Voici un violon:

https://jsfiddle.net/1h07t30z/755/

0
goediaz 13 avril 2018 à 13:48