Angular 1.5組件回調綁定未執行

我試圖在網頁上創建一個搜索按鈕，單擊它時將顯示一個模式對話框，提示用戶在其搜索查詢中輸入。搜索按鈕是一個浮動操作按鈕，一種材質設計，當鼠標懸停在按鈕上時會顯示特定的「搜索類型」（與Materialize CSS buttons page上的示例完全相同）。我在父控制器上定義了一個方法，它將簡單地將消息記錄到控制檯，以測試此功能的工作原理。使用Angular的bindings語法將該方法傳遞給搜索按鈕組件，並使用默認的$ctrl控制器名稱從搜索的HTML模板中調用該方法。Angular 1.5組件回調綁定未執行

但是，當我點擊相關按鈕時，我發現回調沒有被調用，而且我不完全確定爲什麼。沒有錯誤或任何顯示。任何人都可以看看嗎？以下是相關的代碼。有關的組件稱爲浮動操作按鈕fab。

的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'];

個組件/工廠/ index.js

import view from './fab.html'; 

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

export default 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>

注意如何當上的相關<div>用戶點擊，角的ngClick指示應觸發和執行回調函數。但它不是！

來源

2016-08-09 Zach Dziura

當您定義控制器時，您沒有使用「controller as」語法，因此ctrl未在您的視圖中定義。試試這個

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

</div>

來源

2016-08-09 18:38:19 rob

哦，jeez，我覺得自己像個白癡。我沒有意識到我不得不命名控制器。我認爲我可以通過其名稱調用控制器。謝謝！ –

發生在我們身上 – rob

或者，您可以將'AppController'導入您的組件，並將其註冊爲'controller：AppController'。在這種情況下，你可以在你的模板中使用'$ ctrl'，並且不需要擔心''controllerAs'語法 – mcranston18

Angular 1.5組件回調綁定未執行

回答

相關問題