沒有ng-app指令，Angular js自定義指令不起作用

Question

我創建了一個名為myAddress的自定義指令。 我將在另一個HTML頁面中使用它。 僅當我在以下元素中為其提供ng-app時，自定義指令才有效。

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

但是如果我寫這個就行不通

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

我應該在沒有ng-app的情況下使其工作。

以下是自定義指令代碼。

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>

請幫助，在此先感謝。

Answer 1

嘗試以下

<!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>

好好看看body標簽上的ng-app。

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

看這個例子

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

您編寫的自定義模塊將被注入另一個有角度的應用程序中，該應用程序使您可以訪問my-address指令

Answer 2

如果您不打算自己調用angular.bootstrap() ，您的<html>需要一個ng-app屬性（出於與異步相關的原因，您可能希望這樣做）。

您希望將其放在頂級標簽（應該為html ）上，因為該標簽之外的任何內容都不會被angular拾取（這意味着控制器，視圖，foreach等）。

這就是您的代碼不起作用的原因：在ng-app -enabled元素之外未“啟用” Angular。

沒有ng-app指令，Angular js自定義指令不起作用

問題描述

2 個解決方案

解決方案1
0 已采納 2016-02-01 16:27:07

解決方案2
0 2016-02-01 16:27:23

沒有ng-app指令，Angular js自定義指令不起作用

問題描述

2 個解決方案

解決方案1 0 已采納 2016-02-01 16:27:07

解決方案2 0 2016-02-01 16:27:23

解決方案1
0 已采納 2016-02-01 16:27:07

解決方案2
0 2016-02-01 16:27:23