Angularjs 中的 HTML 和 JAVASCRIPT 编辑器答案

【问题标题】：HTML and JAVASCRIPT Editor in AngularjsAngularjs 中的 HTML 和 JAVASCRIPT 编辑器
【发布时间】：2017-08-28 20:14:45
【问题描述】：

我有一个使用 Jhipster 创建的 angularjs 1.5.8 应用程序。

对于我的网站，我想制作一个 HTML 和 JAVASCRIPT 编辑器。需要允许用户编写 HTML 代码，但也需要 JAVASCRIPT。

使用这个库我知道我可以实现以下目标。

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

1：绑定 HTML 代码。 2：如果存在于 HTML 中，则绑定 Angular 代码

例如：<h1>{{$scope.test}}</h1>

将在范围内呈现正确的值。

但是在 html 中这样的东西呢

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

我收到 $scope 未定义错误，不知何故 $scope 值在脚本标签中不可用。

如果有人好奇我为什么需要这样做，因为我们希望为应用程序的用户提供创建自己的 Angularjs 表单。

【问题讨论】：

$scope 是 Angular 代码中的私有构造函数，因此您不能在 script 标签中使用它，为什么要在其中使用它？用户可以动态创建表单
我不确定是谁在问题中添加了 -1，如果人们无法理解，他们仍然可以在添加 -1 之前询问 @MountainKing 感谢您的评论。我实际上找到了答案，如果他们遇到此类问题，我会尽快发布以帮助其他人。

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

我使用 ng-include 解决了，这里是示例源。

我想做两件事。

1：使 ng-include 从包含 html 和 javascript 的范围变量中工作。

2：在包含的字符串中，如果我有一个脚本标记，我希望它在 ng-include 中正确呈现。

为了实现#1，我做了以下事情。

使用了 $templateCache 服务。

示例代码。

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

对于第 2 点

我确保脚本标签的结构如下。

<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>

这样你可以注入一个控制器。

我的要求对我的项目非常具体，我不确定其他没有遇到这个问题的人是否会理解我在说什么。但是对于那些遇到它的人，我希望它对你有所帮助

【讨论】：