what is the best way to attach events to children elements when using directives in angular

Question

i am little bit confused about directives.I want to make a combobox and it consists of multiple elements. angular guys say do not make any manipulation in the controller so they point link function. when i try to attach event to children elements remove them from parent and append them to body it is really hard to do these operations without jquery.maybe there is better way to it? here is the code :

<!doctype html>
<html ng-app="angularApp">
<head>
<meta charset="utf-8" />
<style type="text/css">
    .cities{
        position: relative;
        display: none;
    }
</style>

<script type="text/ng-template" id="angular-combo-template.html">
    <div id="combo-wrapper-{{id}}" class="combo-wrapper">
        <input id="combo-input-{{id}}" type="text" />
        <ul id="combo-menu-{{id}}" class="combo-menu">
            <li ng-repeat="item in items">{{item.name}}</li>
        </ul>
    </div>
</script>

<script src="angular.min.js" type="text/javascript"></script>


<script type="text/javascript">
    var angularApp = angular.module('angularApp', []);

    angularApp.controller('CityController', function ($scope) {

        $scope.name = "test";
        $scope.cities = [
            {
                'name': 'Istanbul',
                'value': 34
            },
            {
                'name': 'Izmir',
                'value': 35
            },
            {
                'name': 'Amasya',
                'value': 3
            },
            {
                'name': 'Balikesir',
                'value': 14
            },
            {
                name: 'Bursa',
                value: '16'
            }
        ];
    });

    angularApp.directive("angularCombo", function () {
        return {
            restrict : 'E',
            controller: function ($scope) {

            },
            link : function ($scope, element, attributes) {


            },
            scope: {
                items: '=',
                id : '@'
            },
            templateUrl : 'angular-combo-template.html'
        }
    });
</script>
</head>
<body ng-controller="CityController">
   <angular-combo id="city" items="cities"></angular-combo>
   <angular-combo id="towns" items="towns"></angular-combo>
</body>
</html>

i want to attach focus/blur on input field and when i focus on input, ul must be appended to body by after removed from element, on blur it must be removed from body and append to inside element again.

What exactly are you trying to do? Maybe have a look at a todo-list-example: http://jsfiddle.net/api/post/library/pure/ — mb21, Jul 31 '14 at 11:56
the question is what is more convenient way make this in angular — fatih kiymet, Jul 31 '14 at 14:49

score 1 · Accepted Answer · edited May 23 '17 at 12:23

1

You don't need events and such, that's not "the Angular way" (see how-to-think-in-angular).

Here you go (jsfiddle):

    <div class="combo-wrapper">
        <input type="text" ng-focus="showList = true" ng-blur="showList = false"/>
        <ul ng-show="showList">
            <li ng-repeat="item in items">{{item.name}}</li>
        </ul>
    </div>

edited May 23 '17 at 12:23

Community

1
1

answered Jul 31 '14 at 15:02

mb21

34,845
8
116
142

i understood the point, there is little gap in my mind. what if ng-show doesn't fulfill what i want? should i write new directive? – fatih kiymet Jul 31 '14 at 19:46
@user3233592 Your question isn't very precise. But yes, if you want a new directive you need to write a new directive... meanwhile, feel free to accept this answer if it answered your original question. – mb21 Aug 01 '14 at 09:02

what is the best way to attach events to children elements when using directives in angular

1 Answers1