javascript – 使用$emit从指令发送到控制器的事件

我尝试发送一个事件当项目被选择,从指令到控制器使用$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>