Question

有人可以告诉我如何在角度js中制作自定义指令。我正在尝试使用angular-js中的jquery-autocomplete进行自动完成。

在jQuery中，它显示为http://jsfiddle.net/dfapnrxf/或此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添加到指令的链接函数中。我个人推荐选项2），因为你可能会依赖父指令的范围来解决问题（例如，当一个指令被不同的控制器多次使用时）。

因此，要在链接函数范围内定义availableTags，您可以a）将其作为HTML标记的自定义属性传递，或者b）您可以在链接函数中定义scope.availableTags - 这是我在下面的代码和这个代码中做了什么：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中制作自定义指令？

2 个答案: