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

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

angularjs events

Angularjs 在angular中使用指令时，将事件附加到子元素的最佳方式是什么,angularjs,events,angularjs-directive,element,Angularjs,Events,Angularjs Directive,Element,我对指令有点困惑。我想制作一个组合框，它由多个元素组成。 angular的家伙说，不要在控制器中进行任何操作，所以他们指向链接功能。当我尝试将事件附加到子元素时，将它们从父元素中移除，并将它们附加到主体中，如果没有jquery，执行这些操作非常困难。也许有更好的方法？代码如下： <!doctype html> <html ng-app="angularApp"> <head> <meta charset="utf-8" /> <style

我对指令有点困惑。我想制作一个组合框，它由多个元素组成。 angular的家伙说，不要在控制器中进行任何操作，所以他们指向链接功能。当我尝试将事件附加到子元素时，将它们从父元素中移除，并将它们附加到主体中，如果没有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>


.城市{
位置：相对位置；
显示：无；
}

{{item.name}

var angularApp=angular.module（'angularApp'，[]）；
angularApp.controller（'CityController'，函数（$scope）{
$scope.name=“测试”；
$scope.cities=[
{
'姓名'：'伊斯坦布尔'，
“值”：34
},
{
“名称”：“伊兹密尔”，
“值”：35
},
{
“name”：“Amasya”，
“值”：3
},
{
“名称”：“Balikesir”，
“值”：14
},
{
名称：'法氏囊'，
值：“16”
}
];
});
angularApp.指令（“angularCombo”，函数（）{
返回{
限制：'E'，
控制器：功能（$scope）{
},
链接：函数（$范围、元素、属性）{
},
范围：{
项目：“=”，
id:“@”
},
templateUrl:“angular combo template.html”
}
});

我想在输入字段上附加聚焦/模糊，当我聚焦于输入时，ul必须在从元素中删除后附加到主体，在模糊时，它必须从主体中删除并再次附加到内部元素。

您不需要事件等，这不是“角度方式”（请参阅）

给你（）：



{{item.name}

你到底想做什么？也许看一看待办事项列表的例子：我更新了链接中的代码问题是什么更方便的方式让这在angulari理解了这一点，在我的脑海中没有什么差距。如果ng show不能满足我的需求呢？我应该写新指令吗？@user3233592你的问题不太准确。但是是的，如果你想要一个新的指令，你需要写一个新的指令。。。同时，如果这个答案回答了您最初的问题，请随意接受。

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