While dealing with AngularJS, I have an index page that includes a <div ui-view></div>. When a specific URL like #/offers/new is entered, it loads a page such as new-offer.html into the ui-view.
In my javascript code block within the index.html, I aim to manipulate HTML present in the `new-offer.html` page. What occurs is that upon loading index.html, the javascript executes without finding the relevant HTML in the index file. Then, even after calling #/offers/new and injecting new-offer.html, nothing happens.
This is a snippet from my index.html:
<!doctype html>
<html>
...
<div ui-view></div>
... Code
... Other scripts
<script src="scripts/app.js"></script>
<!--TEXT EDITOR JS-->
<script src="scripts/js/editor.js"></script>
</body>
</html>
Below is the content of new-offer.html:
... Code
<div class="col-md-12">
<div class="text-editor-box">
<textarea class="txtEditor"></textarea>
</div>
</div>
... Code
And here is the script I include in the index.html which should be executed when #/offers/new is called:
//TEXT EDITOR
if ($('.txtEditor').length) {
$(".txtEditor").Editor();
}
Is there a way to resolve this issue without placing the javascript code inside the new-offer.html? My goal is to delay executing that javascript until after injecting the HTML from new-offer.html into index.html.
Edit 1:
I attempted using directives in the following manner:
In app.js :
.directive('textEditordir', function() {
return {
template: '<div class="text-editor-box"><textarea class="txtEditor"></textarea></div>'
};
});
And in new-offer.html :
<div text-editordir></div>
However, the JavaScript code still did not work as intended.