angular 引入编辑器以及控制器的学习和理解。。。

在angular中引入编辑器的时候花了很长时间,然后发现自己以前根本就没好好用过angular,因为项目是接手的学姐的,学姐又是接手的学姐的,到我这里就只是写写页面的事了。

引入编辑器差了好多好多资料,因为controller这个东西卡住了好久好久,前几天看了两节angualr的视频才有一点点的接触到controller,然后今天理解了一下下就搞出来了,其中遇到过的报错,不只有一下三种。。。时间跨度太久,没有记录下了。

1.项目中找不到angular-cli.json,也找不到angular.json

查到引入tinymce编辑器时,要配全局访问?然后就是找不到这个文件,我查了一下项目的版本好像是v1.5.0。得再研究下子。。。。

2.

后来全局安装tinymce,添加控制器我真的搞了好久,教程是写在js里,我找了好久才发现这个项目的控制器写在哪里。

教程一般都是这样写的:

var app = angular.module(‘app‘, [‘ui.tinymce‘])
            app.controller("editorController", function( $scope ) {
                $scope.tinymceOptions = {            //配置回调的事件
                    handle_event_callback : function(e) {
                        console.log(e);
                    }
                };
                $scope.tinymceModel = "niceMCE"//初始化绑定的值
            });

声明一个模块,模块里声明控制器。我先是直接在我项目中的js文件中写的如上,然后html绑定这个控制器,控制台就会报错找不到这个控制器。我以前以为绑定这个控制器跟我项目中引入的promptBox一样,这个写在congfig.js文件下,于是我换了个思路把上上面那段代码也写在这个文件里,显然还是不行的。
今天在绑定模块ng-app时才发现在index.html中已经包含了一个ng-app,同时这个目录下的app.js文件下那个一直存在但我不明白的变量GNAR的定义方法就是以定义模块的方法定义的。然后查资料,说angularjs 中只能有一个模块module(ng-app=""),一个模块可以有多个控制器(ng-controller="")今天才找到的,GNAR原来就是项目里添加过的模块。于是我把ui.tinymce加到了app.js中定义GNAR的地方。

3.

然后在页面中对应的js文件中,我也琢磨了一会,项目中配置对应js的时候是这样配置的:

我原本把‘editorController’加到了上代码的[ ]中,于是就报错了。查资料好像是引入了多个控制器,或者在控制器中引入了控制器。

我才想起在配置路由的时候,已经加了控制器,就叫‘’中的名字,我 在后面写‘editorController’应该就是把控制器写到了控制器里。

于是我才转过来,直接把引入编辑器之后的写在了后面的fanction中,就成功了!

我还要好好看一下控制器,搞这么久就说因为控制器都不了解,之前都没有研究过angular,上面可能理解还不对,但是引入还是成功了。

成果参考:

不明提供者的错误可能汇总:

https://blog.csdn.net/victoryzn/article/details/81302150

AngularJS中的Provider们:Service和Factory等的区别

https://segmentfault.com/a/1190000003096933?utm_source=tag-newest

引入编辑器:

https://www.cnblogs.com/diligenceday/p/4181982.html

原文地址:https://www.cnblogs.com/lian-dong/p/10295338.html

时间: 2024-10-13 18:29:34

angular 引入编辑器以及控制器的学习和理解。。。的相关文章

用angular引入复杂的json文件2

昨天我们也说了一下angular引入复杂json文件的方法,今天我们再来学习一种方法,而且更简单,更快捷. 首先我们引入一个angular插件,并且写上引入模块和控制台,在html中书写上模块名和控制台名. 之后创建一个json文件 之后我们需要在控制台中将这个json文件引入 之后我们在html中将json文件中的数据导出 之后的效果就是这样子的 我的发表到此为止,希望对大家有所帮助

angular的GitHub Repository Directive Example学习

angular的GitHub Repository Directive Example学习 运行下面代码 <!DOCTYPE html><html ng-app="myApp"><head>     <meta charset="utf-8" />     <title>GitHub Repository Directive Example</title>       <script sr

ios 控制器 modal 学习

5.12 为了给学生改论文,在UPC上登录了Windows 8.1,晚上正常关机.今日切换登陆Ubuntu 14.04分区,发现原来可以正常访问的windows下的NTFS分区都被锁死,提示如下错误: Error mounting /dev/sda2 at /media/love/Mis Archiivos: Command-line `mount -t "ntfs" -o "uhelper=udisks2,nodev,nosuid,uid=1000,gid=1000,dma

SSH加密原理、RSA非对称加密算法学习与理解

首先声明一下,这里所说的SSH,并不是Java传统的三大框架,而是一种建立在应用层和传输层基础上的安全外壳协议,熟悉Linux的朋友经常使用到一 个SSH Secure Shell Cilent的工具,本文也是基于此工具加密原理的学习,在SSH的加密原理中,使用到了RSA非对称加密算法,本文也一并做了学习和了解. 非对称加密算法 在日常的工作生产中, 我们经常需要进行数据的通讯,开发人员经常需要对数据进行加解密操作,以保证数据的安全.数据的加密算法非为对称加密和非对称加密两种,常用的DES.三

JDK学习---深入理解java中的LinkedList

本文参考资料: 1.<大话数据结构> 2.http://blog.csdn.net/jzhf2012/article/details/8540543 3.http://blog.csdn.net/jzhf2012/article/details/8540410 4.http://www.cnblogs.com/ITtangtang/p/3948610.html 5.http://blog.csdn.net/zw0283/article/details/51132161 本来在分析完HashSe

一名工程师对于深度学习的理解-神经网络基础ANN

原文链接 序 读书期间对于深度学习也有涉及,不过只是皮毛,在这个数据和算法的时代,也需要更加贴近算法.于是从一名工程师角度出发,希望通过几篇文章,将深度学习基础记录下来,同时也是对于自己学习的总结和积累.总体思路是ANN-CNN-DNN,中间想起来有什么忘记的,也会加番. 神经网络概述 这是一张典型的人工神经网络的图,图中的节点称为神经元,图共分为三层,第一层为输入层,第二层为隐藏层,第三层为输出层.输入层接受外部世界的输入,具像化为图像的像素值,实体的特征值等,输出层概率预测结果,具像化为该图

对属性动画ObjectAnimator.ofObject方法的学习和理解

关于对属性动画 ObjectAnimator.ofObject(view, "position", new PointEvaluator(), pStart, pEnd); 方法的学习和理解,做个总结,也当做笔记记在这里,遗忘的时候以便查阅,也希望能帮助正在学习这块知识的同学. 这个方法的主要作用是根据一定的规则对目标对象的某个具体属性进行改变,从而使目标对象实现与该属性相关的动画效果. 参数的讲解: 第一个参数:动画的实施对象 第二个参数:关键词,在动画的实施对象中必须要有一个 &q

python基础知识的学习和理解

参考链接:https://github.com/yanhualei/about_python/tree/master/python_learning/python_base python基础知识笔记 Flask aiohttp的学习和理解 assert() asyncio的学习和理解 continue_break学习和理解 cprofile代码效率分析 datatime dict字典学习与理解 django_project eval() filter() gevent协程的学习和理解 http服

angular的编辑器tinymce

效果图 通过nodejs的 npm 的bower安装依赖安装, 命令行下执行 bower install angular-ui-tinymce ; 注意(bower和git要是本地的全局变量) 等待bower自动下载完毕以后,在DEMO的页面引用几个JS文件; 1 2 3 <script type="text/javascript" src="app/bower_components/tinymce/tinymce.js"></script>