CODEWITHSUNDEEP
angularjsangularjs-directivedirective
Sonu Soni
Sonu Soni

Reputation: 1

tried to load angular more than once, while creating custom directive

My index.html file and i tried to load the directive in this html file. //

{% extends "base.html" %}
{% load staticfiles %}
{% block content %}
<div ng-app="myApp">
<div ng-controller="mainController">
{% verbatim %} 
<div class="row">
<div class="column small-12">
<h1 class="up heading text_setting">{{title}}</h1>
</div>
</div>
<edit-cart></edit-cart>
<div class="row">
<div class="small-12 column"><h1 class="up heading">products total <span class="right">3000</span></h1> </div>
</div>
<div class="row">
<div class="small-10 block-center">
<button class="btn-block up heading text_setting ">checkout as guest</button>
<button class="btn-block up heading text_setting">log in/join</button>
</div>
</div>
</div>
{% endverbatim %} 
</div>
{% endblock content %}
{% block customjs %}
<!-- common angular js -->
<script src="{% static 'angular_wrapper/shared/angular.min.js' %}"></script>
<script src="{% static 'angular_wrapper/shared/angular-route.js' %}"></script>
<script src="{% static 'angular_wrapper/shared/angular-mock.js' %}"></script>

<!-- app -->
<script src="{% static 'angular_wrapper/shared/app.js' %}"></script>
<!-- controller -->
<script src="{% static 'angular_wrapper/controller/maincontroller.js' %}"></script>
<!-- directives -->
<script src="{% static 'angular_wrapper/directives/directive-editcart.js' %}"></script>
<!-- angular services -->
<script src="{% static 'angular_wrapper/services/service-editcart.js' %}"></script>
{% endblock customjs %}

editcart.html is this //

<div class="row"> <P>{{move.name}}</P> <P>{{move.email}}</P> </div>

and angular code //

var app = angular.module('myApp', ['ngRoute']);
app.controller('mainController', ['$scope', function($scope) {
    $scope.move={
        name:'sonu',
        email:'[email protected]'
    };
}]);
//directive
app.directive('editCart', function() { 
  return { 
    restrict: 'E',
    templateUrl: 'directives/editcart.html' 
  }; 
});

console-image attached here

I am creating custom directive for my Web app but couldn't fix this bug. don't know what is wrong.

I have included all js please help?

Upvotes: 0

Views: 112

Answers (1)

Giacomo
Giacomo

Reputation: 31

As stated in this GitHub issue by Michael Bromley (the second answer from the top), the problem is that Angular is trying to instantiate a template it's not able to find, so it just reload the index.html file which contains the angular script, so the error.

I resolved this issue by indicating in the templateUrl the full path of the file from the root of the public directory (or the one from which you are attempting to take the file from).

So in my case was modules/teams/client/directives/notification.html insted of directives/notification.html.

I don't knwo if it's the right solution, but worked for me.

And what I was really disappointed by was the fact that angular didn't tell me nothing about this missing template, but when I put modules/directive(which is a folder) it gives me back an error.

Really strange behaviour, I expected at least to be informed that the template was not loaded correctly.

Upvotes: 2

Related Questions