![dashboard]( "dashboard")
使用表达式("&")绑定传递数据的DEMO angular.module("app",[]).directive("customDirective",function() { return { scope: { onSave: '&', }, template: ` <fieldset> <input ng-model="message"><br> <button ng-click="onSave({$event: message})">Save</button> </fieldset> `, };}) <script src="//unpkg.com/angular/angular.js"></script><body ng-app="app"> <custom-directive on-save="message=$event"> </custom-directive> <br> message={{message}}</body> Can't access controller scope from angular component output binding functionI'm trying to access my home controller scope from dashboard component but it's undefined.I also tried a second approach but then my function variable is undefined.I'm using Angular 1.5 with TypescriptFIRST APPROACH:Home controller HTML:<div class="home-container"> <dashboard-component on-tile-type-changed="HomeCtrl.onTileTypeChanged"> </dashboard-component></div>Home controller js:namespace app.dashboard { 'use strict'; class HomeController { static $inject:Array<string> = ['$window']; constructor(private $window:ng.IWindowService) { } private onTileTypeChanged(tile:ITile) { console.log(tile); // DEFINED AND WORKING console.log(this); // NOT DEFINED } } angular .module('app.dashboard') .controller('HomeController', HomeController);}Dashboard controller js:angular.module('app.dashboard') .component('dashboardComponent', { templateUrl: 'app/dashboard/directives/dashboard-container.html', controller: DashboardComponent, controllerAs: 'DashboardCtrl', bindings: { onTileTypeChanged: "&" } });this.onTileTypeChanged()(tile);SECOND APPROACH:Home controller HTML:<div class="home-container"> <dashboard-component on-tile-type-changed="HomeCtrl.onTileTypeChanged()"> </dashboard-component></div>Dashboard controller js:this.onTileTypeChanged(tile);And here I'm getting the opposite:private onTileTypeChanged(tile:ITile) { console.log(tile); // NOT DEFINED console.log(this); // DEFINED AND WORKING} 解决方案 tl;dr; see Demo belowYou are using expression binding.angular.module('app.dashboard') .component('dashboardComponent', { templateUrl: 'app/dashboard/directives/dashboard-container.html', controller: DashboardComponent, controllerAs: 'DashboardCtrl', bindings: { onTileChange: "&" } })tTo communicate event data from a component to a parent controller:Instantiate the dashboard-component with:<dashboard-component on-tile-change="HomeCtrl.onTileChange($tile)"></dashboard-component>In the component controller invoke the function with locals:this.onTileChange({$tile: tile});The convention for injected locals is to name them with a $ prefix to differentiate them from variables on parent scope.From the Docs:-- AngularJS Comprehensive Directive API ReferenceDEMO of using expression ("&") binding to pass dataangular.module("app",[]).directive("customDirective",function() { return { scope: { onSave: '&', }, template: ` <fieldset> <input ng-model="message"><br> <button ng-click="onSave({$event: message})">Save</button> </fieldset> `, };})<script src="//unpkg.com/angular/angular.js"></script><body ng-app="app"> <custom-directive on-save="message=$event"> </custom-directive> <br> message={{message}}</body> 这篇关于使用表达式`(“&")`绑定将数据从AngularJS组件传递到父范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 10-27 21:29