I am new to AngularJS and currently stuck with a design question. Sorry in advance as this is going to be long-winded.
Scenario#1
I'm using a third-party directive (type-ahead) which exposes a event "selected" via $emit. I need to update the model on the type-ahead "selected" event which in-turn drives some other logic.
I feel that handling the selected event in the parent controller (testController) is not ideal since if there are multiple typeahead directives in the same scope, how do I associate the event with the element when im doing this wire-up outside the directive ?
So watching on the model property for changes(name1) seems to be the only clean option. Am I correct ?
<div ng-app="testApp">
<div ng-controller="testController">
<type-ahead ng-model="name1" source="typeAhead1Data"></type-ahead>
<!--<type-ahead ng-model="name2" source="typeAhead2Data"></type-ahead>-->
</div>
</div>
angular.module('testApp').controller('testController', ["$scope", function ($scope) {
$scope.typeAhead1Data = ['abc','def','ghi'];
//$scope.typeAhead2Data = ['jkl','mno','pqr'];
//This seems like a bad idea since what if I had another type-ahead
//control in the scope of the same controller...
$scope.$on('typeahead:selected', function (e, val) {
//logic to be performed on type-ahead select
$scope.name1 = val;
});
/*
// the other approach that came to mind is doing a watch
$scope.$watch('name1', function () {
//logic to be performed on type-ahead select
});
*/
}]);
Scenario#2
Lets say I have a directive that adds a menu to every list item in an unordered list. The menu item click should trigger an action. If the directive raises an event via $emit, I will run into the same issue of associating the event with the element and performing the necessary post-processing.
In jquery, the way I would have done this is add a class to the list item and attach an event using the class selctor.
Any thoughts ?
thanks