Angular js：無法創建指令

我想創建指令，但我的指令函數沒有被調用。Angular js：無法創建指令

的index.html

<div ng-repeat="que in questions.Cars"> 
          <question-dir>print from direcetive</question-dir> 
</div>

ConytrolDirective.js

(function() { 
    "use strict"; 

    angular 
     .module("autoQuote") 
     .directive('questionDir',["questionDir"]); 

    function questionDir() 
    { 
     return { 
      template : "<h1>Made by a directive!</h1>" 
     }; 
    } 

}());

來源

2016-07-15 Praveen D

有在你的代碼的幾個誤區。

你應該有函數名，而不是"questionDir"
.directive('questionDir',[questionDir]);

使用kebab case（-分開的話），而使用指令名

`<question-dir>print from direcetive</question-dir>`

另外，你需要在參考<script src="controlDirectives.js"></script>您index.html頁面。

Demo here

來源

2016-07-15 09:06:00

感謝您的回覆。我更新的代碼仍然沒有改變。 –

你檢查了我的plunkr嗎？ –

現在正在工作，謝謝 –

你有幾件事錯在你的代碼：

在你IIFE關閉你需要在angular
傳遞你需要標準化的指令名kabab在您的html元素名稱中：''
您需要在您的指令註冊中包含對目錄工廠的引用：.directive('questionDir', questionDir);
缺少模塊依賴關係數組：.module("autoQuote", []) - 您應該只將這個定義一次與依賴關係，[]，所以如果您已經在代碼的其他地方已經有了它，請忽略此項。
缺少指令定義對象restrict：restrict: 'E',

如果你點擊Run code snippet你會看到這個指令現在的作品。

(function (angular) { 
 
    "use strict"; 
 

 
    angular 
 
     .module("autoQuote", []) 
 
     .directive('questionDir', questionDir); 
 

 
    function questionDir() 
 
    { 
 
     return { 
 
      restrict: 'E', 
 
      template: "<h1>Made by a directive!</h1>" 
 
     }; 
 
    } 
 

 
}(angular));

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="autoQuote"> 
 
    
 
    <question-dir>print from direcetive</question-dir> 
 

 
</div>

最後，如果你正在使用AngularJS 1.5或更高，你應該考慮使用component語法這一點。

來源

2016-07-15 09:24:38 Martin

它的'IIFE'不是'IIFY'，它不是強制性的在那裏傳遞'angular'參數。有良好的實踐.. –

我在代碼中看不到許多錯誤，但它會幫助很多人停止假設，只要您也發佈了代碼示例鏈接。

但一個你必須做出的主要變化是：改變你的指令定義功能從

.directive('questionDir', ["questionDir"])

調用到

.directive('questionDir', questionDir)

See this working fiddle剛剛加入questions.Cars爲$rootScope做出解答看起來更相關到您的查詢。

爲了保護您的指令元素的內容：

我在你的問題中看到的是：元素<question-dir>有子內容/內部文本print from direcetive在它使它通過指令元素覆蓋完全是<h1>Made by a directive!</h1>。

這就是角的默認性質：的（到正在應用的指令），孩子會失去指令元素元。如果您想要保留元素的原始內容/子元素，則必須將其轉換。

在指令定義對象中使用transclude : true，並添加<div ng-transclude></div>您希望包含指令內容/文本print from direcetive的位置。

代碼片段：

function questionDir() { 
    return { 
    transclude : true, 
    template: "<div ng-transclude></div><h1>Made by a directive!</h1>" 
    }; 
}

Check this one for transclude changes.

檢查這些2個鏈接的詳細信息，Transclude：

來源

2016-07-17 07:42:29 BeingSuman

Angular js：無法創建指令

回答

相關問題