Javascript angular js中的指令工作不正常_Javascript_Angularjs

Javascript angular js中的指令工作不正常

javascript angularjs

Javascript angular js中的指令工作不正常,javascript,angularjs,Javascript,Angularjs,我的first22模块中有两条指令mycustomer1和mycustomer。问题是未调用mycustomer指令？谁能解释一下我做错了什么下面是我的html <!DOCTYPE html> <html ng-app="first22"> <head> <link rel="icon" type="image/png" href="globe/images/correct.png"/&

我的first22模块中有两条指令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>


HTML5示例



{{category.title}}

下面是我的声明

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");
            }
          }
});

var first2=angular.module（'first22'，[]）；
first2.指令（'mycustomer1'，函数（）
{
返回{
限制：'E'，
替换为：“true”，
模板：“aaaaaaaaaaaaaaaaaa”，
链接：函数（）
{
警惕（“我在工作”）；
}
}
})
first2.指令（'mycustomer'，函数（）
{
返回{
限制：“E”，
替换为：“true”，
模板：“你好，世界！！”，
链接：函数（）
{
警惕（“我在工作1”）；
}
}
});

指令名称，声明时应在

camelCase

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

<my-customer></my-customer>

在HTML元素中使用它们时，必须使用

连字符小写

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

<my-customer></my-customer>

将指令放入如下代码中。那就行了

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

正如Rene在上文中指出的，这只是一种惯例，在没有驼峰案例的情况下也能起作用。Raghav代码之所以有效，是因为他使用了空的结束标记，如“”而不是“”

问题是“mycustomer”指令在定义中有替换子句，并且自动关闭标记仅适用于少数几种类型的标记，浏览器根本不会关闭“mycustomer”标记，直到其父标记div关闭，所以“mycustomer1”显示在“mycustomer”标记中，所以当“mycustomer”指令运行时，它取代了现在的“mycustomer1”内容，因此“mycustomer1”实际上根本不运行

本质上，OP编写的代码看起来像下面这样，所以当“mycustomer”运行时，它会从HTML中删除“mycustomer1”，因为mycustomer的指令定义中有“replace”

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

Seminda的解决方案之所以有效，也是因为单个“mycustomer”和“mycustomer1”包含在父div中，所以它们在div关闭之前关闭

对于指令内的指令，请使用replace签出“transclude”属性。

检查控制台是否有错误。您应该将自动关闭标记替换为常规打开/关闭标记。比如

。另一方面，您的替换值现在是truthy而不是true。只要写不带引号的true就行了。它们应该是，但不是因为不带引号就行了。由于命名约定和可读性，它们应该是。