0

I have an angularjs 1.5.8 application created using Jhipster.

For my website I want to make a HTML and JAVASCRIPT editor. Need to allow user to write HTML Code but JAVASCRIPT also.

Using this library I know I can achieve the follow.

https://github.com/incuna/angular-bind-html-compile

1: Bind HTML Code. 2: Bind Angular code if present in HTML

Eg: <h1>{{$scope.test}}</h1>

Would render correct value in the scope.

But what about something like this in the html

<script>
console.log($scope);
</script>

I get a $scope not defined error, somehow the $scope value is not available in the script tag.

If anyone curious that why I need to do this because we want to provide users of the application to create there own Angularjs Forms.

2
  • $scope is private constructor in Angular's code so you can't use it in script tag, and why you want to use it there? User can create forms dynamically Commented Aug 23, 2017 at 6:42
  • I am not sure who added -1 to the question, if people cant understand it they can still ask before adding -1 @MountainKing thank you for commenting. I actually found an answer and I will post it soon to help others if they face such an issue. Commented Aug 23, 2017 at 12:07

1 Answer 1

0

I solved using ng-include, here is the example source.

I wanted to do two things.

1: Make ng-include work from a scope variable which will contain html and javascript.

2: In the included string if I have a script tag I wanted it to render correct in the ng-include.

To achieve the #1 I did the following.

Used $templateCache service.

Sample code.

$templateCache.put('template-form', vm.html + vm.script);

For point #2

I made sure the script tag is structured in the following way.

<script>
(function() {
    'use strict';

  angular.module('myApp').controllerProvider.register('AppTemplateController',AppTemplateController);
  AppTemplateController.$inject = ['$scope'];

  function AppTemplateController($scope){
    // WRITE YOUR CODE IN THIS CONTROLLER
    // YOU CAN WRITE YOUR VARIABLES/FUNCTIONS HERE.
    // MAKE SURE TO CALL THE method "vm.submitForm", to submit your form and pass the form object.
  };

})();
</script>

This way you can inject a controller.

My requirement was very very specific to my projecct, I am not sure if others who did not face this issue even would understand what I am talking about. But for those who do face it, I hope you it helpful

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.