爲什麼這個指令不起作用..有人可以解釋嗎？

這是我的html頁面：爲什麼這個指令不起作用..有人可以解釋嗎？

<!doctype html> 
    <html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title></title> 

     <script type="text/javascript" src="angular.min.js"></script> 
     <script src="scoping_directives.js"></script> 

    </head> 
    <body ng-app="scoping"> 
     <div ng-controller="OuterController"> 
      <p>{{outer_var}}</p> 
      <my-directive></my-directive> 
     </div> 
    </body> 
    </html>

這裏是JS文件：

angular.module('scoping', []) 
    .controller('OuterController', function($scope){ 
     $scope.outer_var = 10; 

    }) 
    .directive('myDirective', function() { 
     console.log("inside directive1"); 
     return { 
     /*scope :{ 
      inner_var : 20 
     },*/ 
     template:'<p>tanmay</p>' 
     }; 
    });

有人可以解釋爲什麼在指令模板不會被渲染。我只得到10作爲輸出。輸出所產生的錯誤並不存在。

來源

2014-10-27 JackSparrow

指令默認限制爲屬性。請參閱$ compile文檔：https://docs.angularjs.org/api/ng/service/$compile – Sacho 2014-10-27 05:17:27

並且您正在使用您的指令作爲元素。換言之，限制：'E'是必需的 – 2014-10-27 05:20:16

在鏈接上我找到了這個： EACM子集的字符串，它將指令限制爲特定的指令聲明樣式。如果省略，則使用默認值（元素和屬性）。 ë - 元素名稱（默認）：<我的指令性> A - 屬性（默認）：

Ç - 類：

米 - 評論：<！ - 指令：MY-指令exp - > – JackSparrow 2014-10-27 05:39:28

通常需要在指令中的restrict選項，它應被設置爲：

'A' - 只匹配屬性名稱
'E' - 只匹配元素名稱
「 C' - 只匹配類名稱

這些限制可以根據需要進行組合：

'AEC' - 匹配任一屬性或元素或類名

的細節描述如下所示

Working Demo

angular.module('scoping', []) 
    .controller('OuterController', function ($scope) { 
    $scope.outer_var = 10; 

}) 
    .directive('myDirective', function() { 
    console.log("inside directive1"); 

    return { 
     restrict: 'E', 
     template: '<p>tanmay</p>', 
     replace: true 
     /*scope :{ 
      inner_var : 20 
     },*/ 
    }; 
});

隨着指令的定義對象的限制屬性我們可以決定我們的指令可以在DOM中出現的位置。我們有四個選項：

1元

restrict: 'E'

該指令可以僅顯示爲HTML元素。

實施例：

<my-directive></my-directive>

2.屬性

restrict: 'A'

該指令只能出現在一個元件HTML屬性。如果未指定restrict，則這是默認值。

實施例：

<div my-directive="expression"></div>

3類。

restrict: 'C'

該指令只能出現內部的HTML元素的類屬性。

實施例：

<div class="my-directive: expression;"></div>

4。評論

restrict: 'M'

該指令只能出現內部HTML註釋。

實施例：

禮貌的


angularjshub - restrict

來源

2014-10-27 05:18:49

是的，這個工作，但我見過的情況和例子限制從未指定，它仍然工作。看看這個https://docs.angularjs.org/guide/directive – JackSparrow 2014-10-27 05:28:20

看看這個：https：//docs.angularjs.org/guide/directive 在這裏我們有一些例子，其中restrict屬性從未被指定，並且它也會顯示「Note ：當你創建一個指令時，它僅限於默認的屬性和元素。爲了創建由類名觸發的指令，你需要使用restrict選項。「 – JackSparrow 2014-10-27 05:30:20

爲什麼這個指令不起作用..有人可以解釋嗎？

回答

相關問題