Angular JS自定义指令在没有ng-app指令的情况下不起作用

angular js custom directive not working without the ng-app directive

本文关键字：指令 ng-app 情况下 不起作用 JS 自定义 Angular      更新时间：2023-09-26

我创建了一个名为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>

请帮忙，提前谢谢。

请尝试以下操作 

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

如果你想在另一个ng应用程序中使用它。 你需要在这个应用程序中注入你的自定义模块

请参阅此示例

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

您编写的自定义模块将被注入到另一个 Angular 应用程序中，该应用程序使您可以访问我的地址指令

如果你不打算自己调用angular.bootstrap()，你的<html>需要一个ng-app属性（你可能出于与异步有关的原因想要这样做）。

你想把它放在你的顶级标签上（应该是html），因为除此之外的任何内容都不会被 angular 拾取（这意味着控制器、视图、前言等）。

这就是您的代码不起作用的原因：Angular 在启用 ng-app 元素之外没有"启用"。

相关文章：