Question

我的第一个模块 mycustomer1和mycustomer 中有两个指令。问题是 mycustomer 指令未被调用？谁能解释一下我在这里做错了什么？

以下是我的HTML

        <!DOCTYPE html>
    <html  ng-app="first22">
        <head>
            <link rel="icon" type="image/png" href="globe/images/correct.png"/>
            <link rel="stylesheet" type="text/css" href="globe/css/style.css"/>     
            <script type="text/javascript" src="globe/script/jquery.js"></script>
            <script type="text/javascript" src="globe/script/angular.js"></script>
            <script type="text/javascript" src="globe/script/mainscope.js"></script>
            <script type="text/javascript" src="globe/script/angular-route.js"></script>

        </head>
        <body >

            <div id="maincontainer" ng-controller="nameListCtrl"> 
                <div id="header">

                    <div id="headtext">HTML5 SAMPLE</div>
                    <mycustomer/>
                    <mycustomer1/>
                </div>
                <div id="sidebar" >
                            <first-directive></first-directive>
                    <ul id="mainmenu" style="">
                        <li  ng-repeat="item1 in content"><a style="color:grey;" id="{{item1.title }}" class="asa" ng-click="show=!show" ng-model="checked" ng-href="#/{{item1.title }}">{{item1.title }}</a>
                           <ul ng-show="show "  ng-if="item1.subitems" style="text-align:left;margin-left:25px;">
                                <li ng-repeat="category in item1.subitems" >
                                    {{ category.title }}
                                </li>
                            </ul>

                        </li>
                    </ul>
                </div>
                <div id="content">
                    <div id="content_flow" ng-view="">
                    </div>
                </div>
                <div id="Interactive_content">
                <div id="Interactive_content_flow">
                    <div id="close">
                    </div>
                </div>
            </div>
            </div>


        </body>
    </html>

我的角度指令声明

var first2 = angular.module('first22', []);


first2.directive('mycustomer1',function()
{
    return{
        restrict:'E',
        replace: 'true',
        template:'<h1>aaaaaaaaaaaaaaaaaaaaaa</h1>',
        link: function()
        {
            alert("I'm working");
        }
    }
})


first2.directive('mycustomer', function() 
{
    return {
            restrict: "E",
            replace: 'true',
            template: '<h3>Hello World!!</h3>',
            link: function()
            {
                alert("I'm working 1");
            }
          }
});

Answer 1

声明时，指令名称应在camelCase

中

first2.directive('myCustomer', function() { ... }

在HTML元素中使用它们时，必须使用hyphenated-lower-case

<my-customer></my-customer>

<强> Working jsFiddle Demo

Answer 2

正如Rene上面所指出的那样，它只是一种惯例，它也可以在没有骆驼的情况下起作用。 Raghav代码有效，因为他使用了像这样的空结束标签＆＃34;＆＃34;而不是＆＃34;＆＃34;

问题是＆＃34; mycustomer＆＃34;指令在定义中具有替换子句，并且自闭合标签仅适用于几种类型的标签，浏览器不会关闭＆＃34; mycustomer＆＃34;标签，直到它的父母，在这种情况下div，关闭所以＆＃34; mycustomer1＆＃34;出现在＆＃34; mycustomer＆＃34;标签所以＆＃34; mycustomer＆＃34;指令运行，它取代了现在的内容＆＃34; mycustomer1＆＃34;因此＆＃34; mycustomer1＆＃34;实际上根本没有运行。

从本质上讲，OP的代码真的如下所示，所以当＆＃34; mycustomer＆＃34;运行，它删除＆＃34; mycustomer1＆＃34;来自HTML，因为＆＃34;替换＆＃34;在mycustomer的指令定义中。

<div>
   <mycustomer>
      <mycustomer1></mycustomer>
   </mycustomer>
<div>

Seminda解决方案的工作原理是个人＆＃34; mycustomer＆＃34;和＆＃34; mycustomer1＆＃34;包含在父div中，因此它们在div关闭之前就会关闭。

对于指令内部的指令，checkout＆＃34; transclude＆＃34;使用替换的财产。

Answer 3

将您的指令放在如下代码中。那就行了。

<div>
<mycustomer />
</div>
<div>
<mycustomer1 />
</div>

Working demo

角js中的指令不能正常工作

3 个答案: