不在DOM上呈現的模板展開指令

我創建了一個JSFiddle演示了我一直面臨的問題，其中模板展開指令的功能不正常。不在DOM上呈現的模板展開指令

在JSFiddle，有三個按鈕，其中每個按鈕切換一個不同的彩色框。

redBox { 
    height: 50px; 
    width: 50px; 
    background-color: red; 
    border: 2px solid black; 
} 

// etc, etc.

單擊一個按鈕切換其中一個彩色框的顯示。

<body ng-app="boxApp"> 
    <div ng-controller="NavCtrl"> 
     <nav> 
      <button ng-click="shownSection = 'red'">Show red box</button> 
      <button ng-click="shownSection = 'blue'">Show blue box</button> 
      <button ng-click="shownSection = 'green'">Show green box</button> 
     </nav> 

     <article> 
      <redBox ng-show="shownSection == 'red'"></redBox> 
      <blueBox ng-show="shownSection == 'blue'"></blueBox> 
      <greenBox ng-show="shownSection == 'green'"></greenBox> 
     </article> 
    </div> 
</body>

最後，每個fooBox元素對應，我想創建基於一個簡單的模板新的DOM元素的AngularJS指令。

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

app.controller("NavCtrl", function ($scope) { 
    $scope.shownSection = "";    
}); 

app.directive('redBox', function() { 
    return { 
     restrict: "E", 
     template: '<div>red box</div>', 
    } 
}); 

app.directive('greenBox', function() { 
    return { 
     // etc. 
    } 
});

它不起作用。事實上，無論我是否首先定義指令，應用程序的行爲方式都是相同的：它按預期切換每個DOM元素，但將該元素顯示爲空 - 忽略height和width屬性，但忽略border屬性。

我認爲fooBox元素會在頁面上呈現，因爲AngularJS在最初遍歷DOM時會識別這些指令，但它似乎沒有做任何事情，並且我沒有得到任何控制檯錯誤。

我在做什麼不正確？

來源

2015-02-09 alex

有幾件事。

您將您的指令命名爲redBox/blueBox/greenBox駝色表示-在字母之間。

所以在HTML它需要看起來像這樣：

<red-box /> 
<blue-box /> 
<green-box />

你的CSS也需要改變，以red-box { }。

同時在你的CSS中放入display:block;。這就是爲什麼高度&寬度被忽略。

jsFiddle updated*

來源

2015-02-09 17:32:31

這是有道理的，但這並不能解決我的大問題。每個指令都有'template：'

foo box

''，但模板無法正確顯示。如果我從代碼中刪除所有的指令，行爲是一樣的。 http://jsfiddle.net/zwta253k/ – alex 2015-02-09 18:14:31

更新了jsfiddle，我沒有注意到指令問題！ – 2015-02-09 18:21:41

謝謝一堆，這解決了我的問題。我無法相信主要問題歸結爲不適當使用駱駝套管。有沒有機會告訴我爲什麼在命令名稱和DOM元素名稱之間存在強制命名約定差異？ – alex 2015-02-09 18:28:22

不在DOM上呈現的模板展開指令

回答

相關問題