Gửi sự kiện bằng cách sử dụng $ emit từ chỉ thị đến bộ điều khiển

Question

Tôi đang cố gắng gửi một sự kiện khi một mục được chọn, từ chỉ thị đến bộ điều khiển bằng cách sử dụng $emit. Tôi có hai chức năng cập nhật cho các tổ chức và một chức năng khác cho mọi người. Chỉ thị của tôi nên xác định sự kiện nào sẽ phát ra.

Đây là chức năng cập nhật của tôi

// Đối với tổ chức

$scope.updateOrgs = function(selectedVal) { 

} 

// Đối với những người

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

} 

Khi nó là người chỉ thị của tôi nên nâng một sự kiện Emit cho updatepeople(), nếu nó là org nó nên nâng cao updateorg().

chỉ thị của tôi trông giống như ...

.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 đoạn mã

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

Làm thế nào tôi có thể làm điều này cả hai chức năng là trong các bộ điều khiển khác nhau, và tôi cũng cần phải gửi các thông số từ chỉ thị cho điều khiển sử dụng $emit?

Answer 1

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

Tôi đoán rằng bộ điều khiển khác của bạn không phải là cha mẹ, vì vậy nhìn vào tùy chọn thứ hai sử dụng $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>