将TinyMCE添加到模块后，界面消失 [英] interface disappears when TinyMCE is added to module

问题描述

所以我正在做一个 Angular-fullstack 项目，我试图在其中添加 ui-TinyMCE 到我的项目。但是当我更改

So I'm working on an Angular-fullstack project where I'm trying to add ui-TinyMCE to my project. However when I change

angular.module('academiaUnitateApp')
  .controller('NewEntryCtrl', function ($http, $scope, $stateParams, entryService, Auth) {
    $scope.entry = {};
  });

进入

angular.module('academiaUnitateApp', ['ui-tinymce'])
  .controller('NewEntryCtrl', function ($http, $scope, $stateParams, entryService, Auth) {
    $scope.entry = {};
    $scope.tinymceOptions = {};
  });

我的界面从

进入

我在做什么错了？

我的 HTML 看起来像这样

<div>
    <h1>
        New chapter
    </h1>

    <form class="form" name="form" ng-submit="save(form)" novalidate>
        <div class="form-group">
            <label class="sr-only" for="title">Title</label>
            <input class="form-control" name="title" type="text" placeholder="enter title here" required ng-model="entry.title" />
        </div>

        <div class="form-group">
            <select required ng-model="entry.language">
                <option disabled>Choose language</option>
                <option ng-repeat="e in languages" value="{{e._id}}">{{e.name}}</option>
            </select>
        </div>

        <div class="form-group">
            <label class="sr-only" for="content">Content</label>
            <textarea ui-tinymce="tinymceOptions" ng-model="entry.content" id="textarea" name="content" ></textarea>
        </div>

        <button type="submit" class="btn btn-success" id="save-btn"><span class="glyphicon glyphicon-ok"></span> Save</button>
    </form>
</div>

<hr>

<div>
    <h1>{{entry.title}}</h1>
    <br/>
    {{entry.content}}
</div>

我添加了

bower.json

{
  "name": "academia-unitate",
  "version": "0.0.0",
  "dependencies": {
    "angular": ">=1.2.*",
    "json3": "~3.3.1",
    "es5-shim": "~3.0.1",
    "jquery": "~1.11.0",
    "bootstrap": "~3.1.1",
    "angular-resource": ">=1.2.*",
    "angular-cookies": ">=1.2.*",
    "angular-sanitize": ">=1.2.*",
    "angular-bootstrap": "~0.11.0",
    "font-awesome": ">=4.1.0",
    "lodash": "~2.4.1",
    "angular-socket-io": "~0.6.0",
    "angular-ui-router": "~0.2.10",
      "angular-ui-tinymce": "*"
  },
  "devDependencies": {
    "angular-mocks": ">=1.2.*",
    "angular-scenario": ">=1.2.*"
  }
}

推荐答案

['ui-tinymce'] 应该为 ['ui.tinymce']

我也想您要添加 ui.tinymce 到错误的位置。似乎您是在重新创建模块，而不是在检索。参见 https://docs.angularjs.org/guide/module#creation-versus-检索。

also I think you are adding ui.tinymce to the wrong place. It seems like you are recreating the module rather than retrieving. See https://docs.angularjs.org/guide/module#creation-versus-retrieval.

对于有角度的全栈，您的 /client/app/app.js 具有：

For angular fullstack, your /client/app/app.js has:

angular.module('demoApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'btford.socket-io',
  'ui.router',
  'ui.bootstrap'
])

您应该在此处添加 ui.tinymce 。

angular.module('demoApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'btford.socket-io',
  'ui.router',
  'ui.bootstrap',
  'ui.tinymce'
])

这篇关于将TinyMCE添加到模块后，界面消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！