我尝试发送一个事件当项目被选择,从指令到控制器使用$emit.我有两个更新功能的组织,另一个为人.我的指令应该指定哪个事件应该发出.
这是我的更新功能
//对于组织
$scope.updateOrgs = function(selectedVal) {
}
//对于人
$scope.updatepeople = function(selectedVal,type) {
}
当人是我的指令应该为updatepeople()引发一个发射事件,如果是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从指令发送参数到控制器？
解决方法
Working with $scope.$emit and $scope.$on
我猜你的其他控制器不是父母,所以使用$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',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',{
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>
