Angular JS 1.5 - 我想在 angular js 组件之间进行通信
Angular JS 1.5 - I want to communicate between angular js components
我正在尝试将 businessPhotos
组件的 deletePhoto
和 editPhoto
方法公开到 verticalGrid
组件中。但是有些怎么访问不了。
任何帮助将不胜感激,谢谢
photo.js
angular.module('business')
.component('businessPhotos', {
templateUrl: 'business/photos.html',
controller: [ function() {
var $ctrl = this;
$ctrl.editPhoto = function(photo) {
// code
};
$ctrl.deletePhoto = function(id) {
// code
};
}]
});
photo.html
<vertical-grid ng-if="$ctrl.business.provider_photos" cells="$ctrl.business.provider_photos" delete-photo="$ctrl.deletePhoto(id)" edit-photo="$ctrl.editPhoto(photo)"></vertical-grid>
竖-grid.js
angular.module('dashboard')
.component('verticalGrid', {
bindings: {
cells: '<',
deletePhoto: '&',
editPhoto: '&'
},
templateUrl: 'utils/vertical-grid.html',
selector: 'vertical-grid',
controller: ['$element', function($element) {
var $ctrl = this;
$ctrl.colGrid = [];
var numOfCols = 4;
var numOfCells = $ctrl.cells.length;
$ctrl.colCssClass = 'col-xs-3';
for (var i = 0; i < numOfCells; i++) {
var colIndex = i % numOfCols;
if (!$ctrl.colGrid[colIndex]) {
$ctrl.colGrid[colIndex] = [];
}
$ctrl.colGrid[colIndex].push($ctrl.cells[i]);
}
}]
});
竖-grid.html
<div class="provider-photos row">
<div class="{{$ctrl.colCssClass}}" ng-repeat="col in $ctrl.colGrid track by $index">
<div class="photo-outer-tile" ng-repeat="cell in col track by $index">
<div class="photo-tile">
<img ng-src="{{cell.tile_url}}">
<div class="photo-controls">
<a ng-click="$ctrl.deletePhoto(cell.id)" href="javascript:void(0);">Delete</a>
<a href="javascript:void(0);">Crop</a>
</div>
</div>
</div>
</div>
</div>
要在 angularjs 控制器之间通信,您可以使用 service
(或 factory
,这在概念上非常相似)。
例如参见 [=14=].
您可以使用 $watch
概念将事件从服务实时传播到控制器。
更简单的方法是在两个控制器中使用 inject $rootScope
。
您的组件是嵌套的。子组件可以通过 require
调用父组件的函数
示例:
.component('verticalGrid', {
require: {
parent: '^^businessPhotos'
},
controller: function () {
this.$onInit = function () {
this.parent.editPhoto();
};
},
$onInit 是必要的,告诉 angular 等待组件加载完成。
^^businessPhotos 将引用本地父组件。单个^也是可以的。
我正在尝试将 businessPhotos
组件的 deletePhoto
和 editPhoto
方法公开到 verticalGrid
组件中。但是有些怎么访问不了。
任何帮助将不胜感激,谢谢
photo.js
angular.module('business')
.component('businessPhotos', {
templateUrl: 'business/photos.html',
controller: [ function() {
var $ctrl = this;
$ctrl.editPhoto = function(photo) {
// code
};
$ctrl.deletePhoto = function(id) {
// code
};
}]
});
photo.html
<vertical-grid ng-if="$ctrl.business.provider_photos" cells="$ctrl.business.provider_photos" delete-photo="$ctrl.deletePhoto(id)" edit-photo="$ctrl.editPhoto(photo)"></vertical-grid>
竖-grid.js
angular.module('dashboard')
.component('verticalGrid', {
bindings: {
cells: '<',
deletePhoto: '&',
editPhoto: '&'
},
templateUrl: 'utils/vertical-grid.html',
selector: 'vertical-grid',
controller: ['$element', function($element) {
var $ctrl = this;
$ctrl.colGrid = [];
var numOfCols = 4;
var numOfCells = $ctrl.cells.length;
$ctrl.colCssClass = 'col-xs-3';
for (var i = 0; i < numOfCells; i++) {
var colIndex = i % numOfCols;
if (!$ctrl.colGrid[colIndex]) {
$ctrl.colGrid[colIndex] = [];
}
$ctrl.colGrid[colIndex].push($ctrl.cells[i]);
}
}]
});
竖-grid.html
<div class="provider-photos row">
<div class="{{$ctrl.colCssClass}}" ng-repeat="col in $ctrl.colGrid track by $index">
<div class="photo-outer-tile" ng-repeat="cell in col track by $index">
<div class="photo-tile">
<img ng-src="{{cell.tile_url}}">
<div class="photo-controls">
<a ng-click="$ctrl.deletePhoto(cell.id)" href="javascript:void(0);">Delete</a>
<a href="javascript:void(0);">Crop</a>
</div>
</div>
</div>
</div>
</div>
要在 angularjs 控制器之间通信,您可以使用 service
(或 factory
,这在概念上非常相似)。
例如参见 [=14=].
您可以使用 $watch
概念将事件从服务实时传播到控制器。
更简单的方法是在两个控制器中使用 inject $rootScope
。
您的组件是嵌套的。子组件可以通过 require
示例:
.component('verticalGrid', {
require: {
parent: '^^businessPhotos'
},
controller: function () {
this.$onInit = function () {
this.parent.editPhoto();
};
},
$onInit 是必要的,告诉 angular 等待组件加载完成。
^^businessPhotos 将引用本地父组件。单个^也是可以的。