![](/img/trans.png)
[英]$emit or $broadcast an event from a controller to a directive AngularJS
[英]Send an event using $emit from directive to controller
我正在嘗試使用$emit
從指令到控制器選擇一個項目時發送一個事件。 我有兩個組織更新功能,另一個用於人員。 我的指令應該指定應該發出哪個事件。
這是我的更新功能
//對於組織
$scope.updateOrgs = function(selectedVal) {
}
//對於人
$scope.updatepeople = function(selectedVal, type) {
}
如果是人,我的指令應該為updatepeople ()
引發一個emit事件,如果它是org它應該引發updateorg()
。
我的指令看起來像......
.directive('search', function ($timeout) {
return {
restrict: 'AEC',
scope: {
model: '=',
searchobj: '@',
},
link: function (scope, elem, attrs, index) {
scope.handleSelection = function (selectedItem) {
scope.model = selectedItem;
scope.searchModel="";
scope.current = 0;
scope.selected = true;
$timeout(function () {
scope.onSelectupdate();
}, 200);
};
scope.Delete = function (index) {
scope.selectedIndex = index;
scope.delete({ index: index });
};
scope.Search = function (searchitem,event,searchobj) {
// alert('item entered'+name)
scope.searching = searchitem;
scope.searchobject = searchobj;
scope.onSearch({ searchitem: searchitem , searchobj:searchobj});
};
scope.current = 0;
scope.selected = true;
scope.isCurrent = function (index) {
return scope.current == index;
};
scope.setCurrent = function (index) {
scope.current = index;
};
},
controller: ['$scope','$element','$rootScope','SearchOrg', function($scope,$element,$rootScope,SearchOrg) {
$scope.searchItem = function(filter,searchobj){
//alert('search'+searchobj);
SearchOrg().fetch({'filter': filter, 'searchType': searchobj}).$promise.then(function(value){
$scope.searchData = value.data;
console.info($scope.searchData);
},
function(err) {
});
}
}],
templateUrl: TAPPLENT_CONFIG.HTML_ENDPOINT[0] + 'home/genericsearch.html'
}
});;
HTML片段
<search searchobj=“tei-org” selectedItems=“arrayofIds” search-id=”someidtoIdentify”/>
我怎么能這樣做兩個函數都在不同的控制器中,我還需要使用$emit
將指令中的參數發送到控制器?
我猜你的其他控制器不是父母,所以看看使用$broadcast
的第二個選項。
var app = angular.module('app', []); app.controller('firstController', function($scope) { $scope.selectedOrgs = [] $scope.$on('updateorgs', function(evt, data) { $scope.selectedOrgs.push(data); }); }); app.controller('secondController', function($scope) { $scope.selectedPeople = [] $scope.$on('updatepeople', function(evt, data) { $scope.selectedPeople.push(data); }); }); app.directive('someDirective', function($rootScope) { return { scope: {}, link: function(scope) { scope.options = [{ id: 1, label: 'org a', type: 'org' }, { id: 2, label: 'org b', type: 'org' }, { id: 3, label: 'person a', type: 'person' }, { id: 4, label: 'person b', type: 'person' }]; scope.changed = function() { if (scope.selected) { var updatetype = scope.selected.type; if (updatetype === 'person') { $rootScope.$broadcast('updatepeople', scope.selected); } else if (updatetype === 'org') { $rootScope.$broadcast('updateorgs', scope.selected); } } }; }, template: '<select ng-change="changed()" ng-model="selected" ng-options="option.label for option in options"><option value="">Select</option></select>' }; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <div ng-app='app'> <some-directive></some-directive> <div ng-controller='firstController'> <div>ORGS:</div> <div> {{ selectedOrgs }} </div> </div> <div ng-controller='secondController'> <div>PEOPLE:</div> <div> {{ selectedPeople }} </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.