Angular 1.5 Component Callback-Bindung wird nicht ausgeführt

Ich versuche, eine Suchschaltfläche auf einer Webseite zu erstellen, die beim Klicken auf ein modales Dialogfeld angezeigt wird, das den Benutzer auffordert, ihre Suchanfrage einzugeben. Die Suchschaltfläche ist eine unverankerte Aktionsschaltfläche, ein "Material Design", die bestimmte "Suchtypen" anzeigt, wenn der Mauszeiger über die Schaltfläche bewegt wird (genau wie im Beispiel unter Materialize CSS buttons page). Ich habe eine Methode auf dem übergeordneten Controller definiert, die einfach eine Nachricht an die Konsole protokolliert, um zu testen, ob diese Funktionalität funktioniert. Die Methode wird unter Verwendung der Angular-Syntax bindings an die Suchschaltflächenkomponente übergeben und wird aus der HTML-Vorlage der Suche unter Verwendung des Standardcontrollernamens $ctrl aufgerufen.Angular 1.5 Component Callback-Bindung wird nicht ausgeführt

Allerdings finde ich, dass der Rückruf überhaupt nicht aufgerufen wird, wenn man auf den entsprechenden Knopf klickt, und ich bin nicht ganz sicher, warum. Es werden keine Fehler oder irgendetwas angezeigt. Kann jemand einen Blick darauf werfen? Unten ist der relevante Code. Die fragliche Komponente heißt fab für Floating Action Button.

index.html

<body data-ng-app="app" data-ng-cloak> 
    <div class="wrapper" data-ng-controller="ctrl"> 
    <div class="content" ui-view="content"></div> 

    <fab data-on-button-click="ctrl.onButtonClick($message)"></fab> 
    </div> 

    <script type="text/javascript" src="build/app.bundle.js"></script> 
</body>

app.js

import angular from 'angular'; 
import controller from './app.controller'; 
import routing from './app.routing'; 
import Fab from './components/fab'; 

angular.module('app') 
    .component('fab', Fab) 
    .controller('ctrl', controller) 
    .config(routing);

app.controller.js

export default class AppController { 
    constructor($document) { 
     this.document = $document; 
    } 

    onButtonClick($message) { 
     console.log($message); 
    } 
} 

AppController.$inject = ['$document'];

Komponenten/fab/index.js

import view from './fab.html'; 

let Fab = { 
    template: view, 
    bindings: { 
     onButtonClick: '&' 
    } 
}; 

export default Fab;

Komponenten/fab/fab.html

<div class="fab__container"> 
    <a class="fab__main blue"> 
    <img class="fab__icon" src="./search.svg"> 
    </a> 

    <ul class="fab__options"> 
    <li class="fab__option-wrapper" data-active> 
     <label class="fab__text">Search Type 3</label> 
     <div class="fab__option red" data-ng-click="$ctrl.onButtonClick({$message: 'Type 3'})"> 
     <a class="fab__icon--small">&</a> 
     </div> 
    </li> 

    <li class="fab__option-wrapper" data-active> 
     <label class="fab__text">Search Type 2</label> 
     <div class="fab__option yellow" data-ng-click="$ctrl.onButtonClick({$message: 'Type 2'})"> 
     <a class="fab__icon--small">@</a> 
     </div> 
    </li> 

    <li class="fab__option-wrapper" data-active> 
     <label class="fab__text">Search Type 1</label> 
     <div class="fab__option green" data-ng-click="$ctrl.onButtonClick({$message: 'Type 1'})"> 
     <a class="fab__icon--small">#</a> 
     </div> 
    </li> 
    </ul> 
</div>

Beachten Sie, wie wenn der Benutzer klickt auf der entsprechenden <div>, ngClick Richtlinie der Angular sollte auslösen und ausführen die Rückruffunktion. Aber es ist nicht!

Quelle

2016-08-09 Zach Dziura

Sie verwenden nicht die "controller as" -Syntax, wenn Sie Ihren Controller so definieren, dass ctrl in Ihrer Ansicht nicht definiert ist. Versuchen Sie dies

<div class="wrapper" ng-controller="ctrl as ctrl"> 

</div>

Quelle

2016-08-09 18:38:19 rob

Oh jeez, ich fühle mich wie ein Idiot. Mir war nicht klar, dass ich irgendwas Controller nennen musste. Es stellte sich heraus, dass ich den Controller mit seinem Namen anrufen konnte. Vielen Dank! –

geschieht mit den Besten von uns – rob

Alternativ können Sie 'AppController' in Ihre Komponente importieren und als' controller: AppController' registrieren. In diesem Fall können Sie '$ ctrl' in Ihrer Vorlage verwenden und brauchen sich keine Gedanken über die 'controllerAs'-Syntax zu machen – mcranston18

Angular 1.5 Component Callback-Bindung wird nicht ausgeführt

Antwort

Verwandte Themen