Question

我对指令有点困惑。我想制作一个组合框，它由多个元素组成。有角度的家伙说不要在控制器中做任何操作，所以他们指向链接功能。当我尝试将事件附加到子元素时，将它们从父项中删除并将它们附加到正文中，如果没有jquery，很难做到这些操作。可能有更好的方法吗？这是代码：

<!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>

我想在输入字段上附加焦点/模糊，当我专注于输入时，ul必须在从元素中删除后附加到body上，在模糊时必须从body中删除并再次追加到内部元素。

Answer 1

你不需要事件等，这不是“Angular方式”（见how-to-think-in-angular）。

你去（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>

在angular中使用指令时，将事件附加到子元素的最佳方法是什么？

1 个答案: