使用angularjs创建和使用自定义指令时不显示任何内容

时间:2016-02-08 17:51:56

标签: angularjs angularjs-directive

我是angularjs的初学者,并创建了一个自定义指令。当我在div标签中使用自定义指令时,没有任何id显示。请查看以下代码并建议我如何做,以及我在这里做了什么错误。

<body ng-app="x">

        <div test></div>
        <div class="any"></div>

        <script>

            var app = angular.module("x", []);

            app.directive("test", function(){

                return {
                    restrict: "A"
                    template: "<h1>custom Attribute</h1>"
                }

            });

            app.directive("any", function(){

               return {

                   restrict: "C" // class directive
                   template: "custom directive class"
               } 
            });

        </script>

    </body>

2 个答案:

答案 0 :(得分:0)

<body ng-app="x">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>

    <div test></div>
    <div class="any"></div>

    <script>

        var app = angular.module("x", []);

        app.directive("test", function(){

            return {
                restrict: "A",
                template: "<h1>custom Attribute</h1>"
            };

        });

        app.directive("any", function(){

           return {

               restrict: "C", // class directive
               template: "custom directive class"
           }; 
        });

    </script>

</body>

请记住在尝试使用某些代码时打开控制台。 (F12)

答案 1 :(得分:0)

刚刚在这里创建了一个小提琴:https://jsfiddle.net/frishi/nbe9hc32/2/

我不确定您在控制台中遇到了什么错误,如果有的话。 马上,您在指令定义对象中缺少逗号。

.directive("test", function(){
return {
          restrict: "A", // <- missing comma
          template: "<h1>custom Attribute</h1>"
       }

 })

查看小提琴中的代码并将其与之进行比较。 这应该可以解决你的问题。