如何在 angular-js 中制作自定义指令？

Question

谁能告诉我如何在 angular js 中制作自定义指令。我正在尝试使用 jquery-autocomplete 在 angular-js 中制作自动完成。

在jQuery中是这样显示的http://jsfiddle.net/dfapnrxf/ or this https://jqueryui.com/autocomplete/

我正在尝试在 angular-js

中实现这种类型的自动完成

所以我做了自定义指令。但是你能告诉我我哪里做错了吗？

这是我的代码：

var app=angular.module("ionicApp",['ionic']);
app.directive('autosemple',function(){

    return{
        restrict:'A',
        scope:{

        },
        link:function(scope,element,attr){
            $( "#tags" ).autocomplete({
              //  source: availableTags
            });
        }
    }
})
app.controller('cnt',function($scope){
    $scope.availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
})

Answer 1

试试这个：

    var app=angular.module("ionicApp",['ionic']);
    app.directive('autosemple',function(){

        return{
            restrict:'A',
            scope:{
         autoTags: '=availableTags'
            },
            link:function(scope,element,attr){
               console.log(element);
                $(element).autocomplete({
                  source: scope.autoTags
                });
            }
        }
    })
    app.controller('cnt',function($scope){
        $scope.availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
    })

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Tabs Example</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>

<body ng-controller="cnt">
    <input type="text" autosemple available-tags="availableTags">
</body>

</html>

Answer 2

仅当您没有为指令定义本地范围时，指令才能访问其父范围。由于您已经为指令定义了一个空的本地范围，如下所示：

app.directive('autosemple',function(){
   return {
     restrict:'A',
     scope:{
    }, ...

您的指令无权访问控制器中定义的 $scope.availableTags。您可以通过 1) 删除指令中的空局部范围，或 2) 将 scope.availableTags 添加到指令的 link 函数来解决此问题。我个人推荐选项 2)，因为依赖指令的父级范围可能会遇到麻烦（例如，当指令被不同的控制器多次使用时）。

因此，要在 link 函数的范围内定义 availableTags，您可以 a) 将其作为自定义属性传入 HTML 标签，或者 b) 您可以只定义 scope.availableTags 在你的 link 函数中——这是我在下面的代码和这个代码笔中所做的：http://codepen.io/jwncoexists/pen/KpzJrZ

app.directive('autosemple',function(){
   return {
     restrict:'A',
     scope:{
     },
     link:function(scope,element,attr){
        scope.availableTags = [
         "ActionScript",
         "AppleScript",
         "Asp",
         "BASIC",
         "C",
         "C++",
         "Clojure",
         "COBOL",
         "ColdFusion",
         "Erlang",
         "Fortran",
         "Groovy",
         "Haskell",
         "Java",
         "JavaScript",
         "Lisp",
         "Perl",
         "PHP",
         "Python",
         "Ruby",
         "Scala",
         "Scheme"
       ];
       $( "#tags" ).autocomplete({
         source: scope.availableTags
       });
     }
   }
 });

如何在 angular-js 中制作自定义指令？

How to make custom directive in angular-js?

angularjs

angularjs-directive

angularjs-scope

angularjs-ng-repeat

angular-ui-router