After creating a custom directive called myAddress, I am facing an issue with its functionality. The directive functions properly only when I add ng-app to the element like so:
<my-Address ng-app="customModule"> </my-Address>.
However, when I try using it without ng-app as below, it fails to work:
<my-Address > </my-Address>.
I need assistance in making the directive work without adding ng-app directly to the element.
Here is the code for the custom directive:
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;
}]);
The following snippet is from the HTML file where the directive is being utilized:
<!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>
Your help in resolving this matter would be greatly appreciated. Thank you!