angular js中的指令無法正常工作

Question

我的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>

還有我的角度指令聲明

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>

工作jsFiddle演示

Answer 2

如上面的Rene所指出的，這只是一個約定，它也可以在沒有駱駝的情況下工作。 拉加夫（Raghav）代碼之所以有效，是因為他使用了空的結束標記，例如“”而不是“”

問題是“ mycustomer”指令在定義中具有replace子句，並且自關閉標簽僅適用於某些類型的標簽，瀏覽器直到其父級（在這種情況下為div）才完全關閉“ mycustomer”標簽。，關閉，以便“ mycustomer1”顯示在“ mycustomer”標記內，因此當“ mycustomer”指令運行時，它將替換為現在為“ mycustomer1”的內容，因此“ mycustomer1”實際上根本沒有運行。

本質上，OP的代碼確實如下所示，因此當“ mycustomer”運行時，由於mycustomer指令定義中的“替換”，它從HTML中刪除了“ mycustomer1”。

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

Seminda的解決方案仍然有效的原因是，父div中包含了單獨的“ mycustomer”和“ mycustomer1”，因此它們在div關閉之前就關閉了。

對於指令內部的指令，簽出“ transclude”屬性與replace一起使用。

Answer 3

將您的指令放在下面的代碼中。 那么它將起作用。

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

工作演示

angular js中的指令無法正常工作

問題描述

3 個解決方案

解決方案1
1 2014-07-14 06:43:56

解決方案2
1 2014-07-14 08:08:59

解決方案3
0 2014-07-14 06:55:26

angular js中的指令無法正常工作

問題描述

3 個解決方案

解決方案1 1 2014-07-14 06:43:56

解決方案2 1 2014-07-14 08:08:59

解決方案3 0 2014-07-14 06:55:26

解決方案1
1 2014-07-14 06:43:56

解決方案2
1 2014-07-14 08:08:59

解決方案3
0 2014-07-14 06:55:26