2016-02-01 32 views
0

我已經創建了一個名爲myAddress的自定義指令。我將在另一個html頁面中使用它。自定義指令只在我給它在元素中的ng-app時才起作用,如下所示。角度js自定義指令不能在沒有ng-app指令的情況下工作

<my-Address ng-app="customModule"> </my-Address>. 

但不工作,如果我寫這篇文章

<my-Address > </my-Address>. 

我應該得到它的工作,而不元素中的NG-應用。

以下是自定義指令代碼。

var mainApp = angular.module("customModule", ['ngSanitize', 'schemaForm']); 
    mainApp.directive('myAddress', [function() { 
     var directive ={}; 
     directive.restrict = 'E'; 
     directive.templateUrl = 'customDirective.html'; 
     directive.controller = 'myController'; 
     //directive.module = 'customModule'; 
     directive.compile = function($scope, element, attributes) { 
     } 
     return directive; 
    }]); 

添加指令的html。

<!Doctype html> 
<html > 

<head> 
    <title>Angular JS Custom Directive</title> 

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="style.css" /> 
</head> 

<body> 
<h2> some heading </h2> 

    <my-Address ng-app="customModule"> </my-Address> 

<link rel="stylesheet" 
     href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> 

<script 
     src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<script 
     src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<script 
     src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> 
<script src="customDirectiveScript.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.js"></script> 
<script src="tv4.js"></script> 
<script src="ObjectPath.js"></script> 
<script src="schema-form.js"></script> 
<script src="bootstrap-decorator.js"></script> 


</body> 
</html> 

請幫忙,提前致謝。

+0

可否請您發佈整個「html」內容? – Zakaria

+1

除非你自己引導角度,否則你需要有ng-app。 – jcubic

+1

當然角應用程序將*不工作,除非你引導它。這是發生什麼,然後你把ngApp屬性。 – dfsq

回答

0

嘗試以下

<!Doctype html> 
<html > 

<head> 
    <title>Angular JS Custom Directive</title> 

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="style.css" /> 
</head> 

<body ng-app="customModule"> 
<h2>NationWide Standardized </h2> 

    <my-Address > </my-Address> 

<link rel="stylesheet" 
    href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> 

<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<script 
    src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<script 
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> 
<script src="customDirectiveScript.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.js"></script> 
<script src="tv4.js"></script> 
<script src="ObjectPath.js"></script> 
<script src="schema-form.js"></script> 
<script src="bootstrap-decorator.js"></script> 


</body> 
</html> 

拿在身體標記的NG-應用好好看看。

如果你想在另一個ng應用程序中使用它。你需要customModule注入你這個應用程序

看到這個例子

angular.module('myApp',['customModule']) 

您編寫的自定義模塊內的另一個角度的應用程序,讓你訪問你我的地址指令注入內

+0

我不應該在我的html中有ng-app,因爲這個自定義指令應該被用在另一個應用程序名稱不同的角度應用程序中,但是謝謝尋求幫助。 – kasey

+0

檢查更新的答案 –

+0

不客氣! –

0

<html>需要一個ng-app屬性,如果你不打算自己打電話給angular.bootstrap()(你可能想這樣做是因爲與異步有關的原因)。

你想把它放在你的頂級標籤上(它應該是html),因爲除此之外的任何東西都不會被角度(即控制器,視圖,foreach等等)拾取。

這就是爲什麼你的代碼不起作用:在ng-app -enabled元素之外,角沒有「啓用」。

+0

我在哪裏調用angular.bootstrap()?我必須在指令之後在js文件中調用它。 – kasey

+0

我建議使用'ng-app' – Ven

相關問題