Wysyłaj zdarzenie za pomocą $ emuluj z dyrektywy do kontrolera

Question

Próbuję wysłać zdarzenie po wybraniu elementu, od dyrektywy do kontrolera, używając $emit. Mam dwie funkcje aktualizacji dla organizacji i drugą dla ludzi. Moja dyrektywa powinna określać, które wydarzenie powinno być emitowane.

Oto moje funkcje aktualizacji

// Dla organizacji

$scope.updateOrgs = function(selectedVal) { 

} 

// dla osób

$scope.updatepeople = function(selectedVal, type) { 

} 

Kiedy to ludzie moja dyrektywa powinna podnieść zdarzenia emitować dla updatepeople(), jeśli było to org, które powinno podnieść updateorg().

moja dyrektywa wygląda ...

.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' 
    } 
});; 

kod HTML

<search searchobj=“tei-org” selectedItems=“arrayofIds” search-id=”someidtoIdentify”/> 

Jak mogę to zrobić zarówno funkcje są w różnych kontrolerów, a także muszę wysłać parametrów z dyrektywy do kontroler używający $emit?

Answer 1

Working with $scope.$emit and $scope.$on

Zgaduję, że inne kontrolery nie są rodzice, więc spojrzeć na drugą opcję, używając $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>