I am working in a MEAN project.
At the back end I need tinymce for cms editing.
I am using ng-view for each page content. but tiny mce is not working inside ng-view
here is my index.html file here it is working fine
<html lang="en" ng-app="AdminApp" >
<head>
<script type="text/javascript" src="/asset/tiny/tiny_mce/tiny_mce.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="includes/tinymce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
width : "505",
height : "150",
mode : "textareas",
theme : "advanced",
extended_valid_elements : "iframe[src|width|height|name|align|type|class|frameborder]",
plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,imagemanager",
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,search,replace,|,media,|,bullist,numlist,|,blockquote,|,undo,redo,|,link,unlink,|,",
theme_advanced_buttons2 : "fontsizeselect,forecolor,backcolor,|,preview,fullscreen,code,insertimage",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
relative_urls : false,
remove_script_host : false,
document_base_url : "",
// Example content CSS (should be your site CSS)
content_css : "css/content.css",
// Style formats
style_formats : [
{title : 'Bold text', inline : 'b'},
{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
{title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
{title : 'Example 1', inline : 'span', classes : 'example1'},
{title : 'Example 2', inline : 'span', classes : 'example2'},
{title : 'Table styles'},
{title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
],
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
<base href="/admin/" />
</head>
<body>
<!--div ng-view></div-->
<textarea>hello</textarea>
</body>
</html>
inside ng-view code
<textarea>home</textarea>
I am using node.js server
Please help me to solve this
Thank you
You can't use tinymce as is in angularjs applications. You should create first directive for that.
However there is already directive for that which you can use: https://github.com/angular-ui/ui-tinymce
Here is the steps to get started with it once you have downloaded ui-tinymce:
index.html
<!DOCTYPE html>
<head>
<script type="text/javascript" src="bower_components/tinymce-dist/tinymce.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-tinymce/src/tinymce.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp">
<form method="post" ng-controller="TinyMceController">
<textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>
<button ng-click="getContent()">Get content</button>
<button ng-click="setContent()">Set content</button>
</form>
</body>
app.js
var myAppModule = angular.module('myApp', ['ui.tinymce']);
myAppModule.controller('TinyMceController', function($scope) {
$scope.tinymceModel = 'Initial content';
$scope.getContent = function() {
console.log('Editor content:', $scope.tinymceModel);
};
$scope.setContent = function() {
$scope.tinymceModel = 'Time: ' + (new Date());
};
$scope.tinymceOptions = {
plugins: 'link image code',
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
};
});
Hope, it works for you. Reference Link - http://embed.plnkr.co/vL7MqL/
Index.html
<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular-route.min.js"></script>
<script type="text/javascript" src="tinymce.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<div ng-app="plunker">
<ng-view></ng-view>
</div>
view.html
<textarea data-ui-tinymce data-ng-model="modal.one"></textarea>
change in the input doesn't change the textarea<br>
<input ng-model="modal.one">
tinymce.js
/**
* Binds a TinyMCE widget to <textarea> elements.
*/
angular.module('ui.tinymce', [])
.value('uiTinymceConfig', {})
.directive('uiTinymce', ['uiTinymceConfig', function(uiTinymceConfig) {
uiTinymceConfig = uiTinymceConfig || {};
var generatedIds = 0;
return {
require: '?ngModel',
link: function(scope, elm, attrs, ngModel) {
var expression, options, tinyInstance;
// generate an ID if not present
if (!attrs.id) {
attrs.$set('id', 'uiTinymce' + generatedIds++);
}
options = {
// Update model when calling setContent (such as from the source editor popup)
setup: function(ed) {
ed.on('init', function(args) {
ngModel.$render();
});
// Update model on button click
ed.on('ExecCommand', function(e) {
ed.save();
ngModel.$setViewValue(elm.val());
if (!scope.$$phase) {
scope.$apply();
}
});
// Update model on keypress
ed.on('KeyUp', function(e) {
console.log(ed.isDirty());
ed.save();
ngModel.$setViewValue(elm.val());
if (!scope.$$phase) {
scope.$apply();
}
});
},
mode: 'exact',
elements: attrs.id
};
if (attrs.uiTinymce) {
expression = scope.$eval(attrs.uiTinymce);
} else {
expression = {};
}
angular.extend(options, uiTinymceConfig, expression);
setTimeout(function() {
tinymce.init(options);
});
ngModel.$render = function() {
console.log("render")
if (!tinyInstance) {
tinyInstance = tinymce.get(attrs.id);
}
if (tinyInstance) {
tinyInstance.setContent(ngModel.$viewValue || '');
}
};
}
};
}]);
example.js
var myApp = angular.module('plunker', ['ngRoute','ui.tinymce','ui.bootstrap']).
config(['$routeProvider', function($routeProvider) {
console.log("init angular");
$routeProvider.when('/', {templateUrl: 'view.html', controller: 'View'});
$routeProvider.otherwise({redirectTo: '/'});
}]);
myApp.controller('View', ['$scope', function ($scope) {
console.log("View Controller");
$scope.modal = {one:"hello"};
}])
Related
I am coding a very very basic playground by using AngularJS and ui-codemirror. Here is the code (JSBin).
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.css">
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="https://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://codemirror.net/mode/xml/xml.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
<script src="https://codemirror.net/mode/css/css.js"></script>
<script src="https://codemirror.net/mode/clike/clike.js"></script>
<script src="https://codemirror.net/mode/php/php.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="codeCtrl">
HTML:<br>
<textarea ui-codemirror ng-model="html"></textarea>
<br>CSS:<br>
<textarea ui-codemirror ng-model="css"></textarea>
</div>
Output:
<section id="output">
<iframe></iframe>
</section>
</div>
</body>
</html>
JavaScript:
var myApp = angular.module('myApp', ['ui']);
myApp.value('ui.config', {
codemirror: {
mode: 'text/x-php',
lineNumbers: true,
matchBrackets: true,
}
});
function codeCtrl($scope, codeService) {
$scope.html = '<body>default</body>';
$scope.css = "body {color: red}";
$scope.$watch('html', function () { codeService.render($scope.html, $scope.css); }, true);
$scope.$watch('css', function () { codeService.render($scope.html, $scope.css); }, true);
}
myApp.service('codeService', function () {
this.render = function (html, css) {
source = "<html><head><style>" + css + "</style></head>" + html +"</html>";
var iframe = document.querySelector('#output iframe'),
iframe_doc = iframe.contentDocument;
iframe_doc.open();
iframe_doc.write(source);
iframe_doc.close();
}
})
The above code works, but the problem is it applies one same ui.config to 2 ui-codemirror. Does anyone know how to apply mode html to the first ui-codemirror and mode css to the second ui-codemirror?
Additionally, how could I set the height (or rows) and width (or cols) of a ui-codemirror?
Since you're dealing with two separate text areas that have rather different roles (or imagine if they were more), it makes sense to define separate directives for them, each one accepting a different config object. I've created a JSBin which shows one possible approach, via directive factory that can be used to generated different "mirrors".
angular.module('codeMirrorApp')
.factory('CodeMirrorFactory', ['$parse',
function($parse) {
return {
createDirective: function(config) {
var configString = JSON.stringify(config);
return {
scope: true,
restrict: 'E',
template: '<textarea ui-codemirror=' + configString + ' ng-model="content"></textarea>',
controller: ['$scope', '$attrs', function($scope, $attrs) {
var handler = $parse($attrs.handler);
$scope.$watch('content', function(value) {
handler($scope, { content: value });
});
}]
};
}
};
}
]);
I'm intentionally using handlers provided by the parent controller instead of bindings to the parent scope as this makes things look more understandable even while looking at the HTML markup.
The controller:
angular.module('codeMirrorApp')
.controller('MirrorsController', ['RenderMirrors',
function(RenderMirrors) {
var ctrl = this,
html,
css;
ctrl.handleHtml = function(htmlString) {
html = htmlString;
RenderMirrors.render(html, css);
};
ctrl.handleCss = function(cssString) {
css = cssString;
RenderMirrors.render(html, css);
};
}
]);
Markup:
<div ng-app="codeMirrorApp">
<div ng-controller="MirrorsController as ctrl">
HTML:<br>
<html-code-mirror handler="ctrl.handleHtml(content)"></html-code-mirror>
<br>CSS:<br>
<css-code-mirror handler="ctrl.handleCss(content)"></css-code-mirror>
</div>
Output:
<section id="output">
<iframe></iframe>
</section>
</div>
Hope this helps.
Controller:
function codeCtrl($scope, codeService) {
$scope.editorOptions1 = {mode: 'text/html',
lineNumbers: false,
matchBrackets: true};
$scope.editorOptions2 = {mode: 'text/css',
lineNumbers: true,
matchBrackets: true};
$scope.html = '<body>default</body>';
$scope.css = "body {color: red}";
$scope.$watch('html', function () { codeService.render($scope.html, $scope.css); }, true);
$scope.$watch('css', function () { codeService.render($scope.html, $scope.css); }, true);
}
Html :
<div ng-controller="codeCtrl">
HTML:<br>
<textarea ui-codemirror="editorOptions1" ng-model="html"></textarea>
<br>CSS:<br>
<textarea ui-codemirror="editorOptions2" ng-model="css"></textarea>
</div>
I am trying to build #TagFriends and comment box feature from FACEBOOK.
I found two examples that might help, I am having library issue when I import one examples library in second one, whole code fails to work, if they are executed individually they work correctly.
1.Simple comment box :
http://devzone.co.in/angularjs-example-simple-user-comment-box/
2.#Tag friend code Below:
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://urbanoalvarez.es/smart-area/dist/smart-area.css">
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.3.8" data-semver="1.3.8" src="https://code.angularjs.org/1.3.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-sanitize.js"></script>
<script src="http://urbanoalvarez.es/smart-area/dist/smart-area.js"></script>
<script src="elastic.js"></script>
<script src="app.js"></script>
<style>
.user{
color: #0074D9;
}
</style>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="DemoController">
<h3>MOC 12</h3>
<!--<h4>#user mentions</h4>-->
<textarea class="form-control code" rows="5" ng-model="text" ng-trim="false" msd-elastic smart-area="config"></textarea>
<hr>
<small class="text-muted">
<b>Available users:</b><br> Bret, Antonette, Samantha, Karianne, Kamren, Leopoldo_Corkery, Elwyn.Skiles, Delphine, Maxime_Nienow, Moriah.Stanton <br>
Type for example "Hey #Antonette"
</div>
<script>
/*
* angular-elastic v2.4.2
* (c) 2014 Monospaced http://monospaced.com
* License: MIT
*/
angular.module('myApp', ['smartArea', 'monospaced.elastic'])
.controller('DemoController', ['$scope', '$http', function($scope, $http) {
$scope.text = '';
$scope.config = {
autocomplete: [
{
words: [/#([A-Za-z]+[_A-Za-z0-9]+)/gi],
cssClass: 'user'
}
],
dropdown: [
{
trigger: /#([A-Za-z]+[_A-Za-z0-9]+)/gi,
list: function(match, callback){
// match is the regexp return, in this case it returns
// [0] the full match, [1] the first capture group => username
$http.get('http://jsonplaceholder.typicode.com/users')
.success(function(data){
// Prepare the fake data
var listData = data.filter(function(element){
return element.username.substr(0,match[1].length).toLowerCase() === match[1].toLowerCase()
&& element.username.length > match[1].length;
}).map(function(element){
return {
display: element.username, // This gets displayed in the dropdown
item: element // This will get passed to onSelect
};
});
callback(listData);
}).error(function(err){
console.error(err);
});
},
onSelect: function(item){
return item.display;
},
mode: 'replace'
}
]
};
}]);
angular.module('monospaced.elastic', [])
.constant('msdElasticConfig', {
append: ''
})
.directive('msdElastic', [
'$timeout', '$window', 'msdElasticConfig',
function($timeout, $window, config) {
'use strict';
return {
require: 'ngModel',
restrict: 'A, C',
link: function(scope, element, attrs, ngModel) {
// cache a reference to the DOM element
var ta = element[0],
$ta = element;
// ensure the element is a textarea, and browser is capable
if (ta.nodeName !== 'TEXTAREA' || !$window.getComputedStyle) {
return;
}
// set these properties before measuring dimensions
$ta.css({
'overflow': 'hidden',
'overflow-y': 'hidden',
'word-wrap': 'break-word'
});
// force text reflow
var text = ta.value;
ta.value = '';
ta.value = text;
// exit if elastic already applied (or is the mirror element)
if ($ta.data('elastic')) {
return;
}
// Opera returns max-height of -1 if not set
maxHeight = maxHeight && maxHeight > 0 ? maxHeight : 9e4;
// append mirror to the DOM
if (mirror.parentNode !== document.body) {
angular.element(document.body).append(mirror);
}
// set resize and apply elastic
$ta.css({
'resize': (resize === 'none' || resize === 'vertical') ? 'none' : 'horizontal'
}).data('elastic', true);
/*
* methods
*/
/*
* initialise
*/
// listen
if ('onpropertychange' in ta && 'oninput' in ta) {
// IE9
ta['oninput'] = ta.onkeyup = adjust;
} else {
ta['oninput'] = adjust;
}
$win.bind('resize', forceAdjust);
scope.$watch(function() {
return ngModel.$modelValue;
}, function(newValue) {
forceAdjust();
});
scope.$on('elastic:adjust', function() {
initMirror();
forceAdjust();
});
$timeout(adjust);
/*
* destroy
*/
scope.$on('$destroy', function() {
$mirror.remove();
$win.unbind('resize', forceAdjust);
});
}
};
}
]);
</script>
</body>
</html>
I have implemented this feature. Find the GitHub: github.com/noob93/Smart-Comment-Box
The Devzone example is using a deprecated feature of AngularJs, I modified the code and feature started working fine.
This is my code
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
var today = new Date();
$scope.gridOptions = {
enableFiltering: false,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
$scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 );
},
columnDefs: [
{ field: 'name' },
{ field: 'gender', cellFilter: 'mapGender' },
{ field: 'company' },
{ field: 'email' },
{ field: 'phone' },
{ field: 'age' },
{ field: 'mixedDate' }
]
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function(data) {
$scope.gridOptions.data = data;
$scope.gridOptions.data[0].age = -5;
data.forEach( function addDates( row, index ){
row.mixedDate = new Date();
row.mixedDate.setDate(today.getDate() + ( index % 14 ) );
row.gender = row.gender==='male' ? '1' : '2';
});
});
$scope.filter = function() {
$scope.gridApi.grid.refresh();
};
$scope.singleFilter = function( renderableRows ){
var matcher = new RegExp($scope.filterValue);
renderableRows.forEach( function( row ) {
var match = false;
[ 'name', 'company', 'email' ].forEach(function( field ){
if ( row.entity[field].match(matcher) ){
match = true;
}
});
if ( !match ){
row.visible = false;
}
});
return renderableRows;
};
}])
.filter('mapGender', function() {
var genderHash = {
1: 'male',
2: 'female'
};
return function(input) {
if (!input){
return '';
} else {
return genderHash[input];
}
};
});
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<input ng-model='filterValue'/><button ng-click='filter()'>Filter</button>
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
In the above code first ui-grid structure display then after data will bind to the ui-grid, but i want to display entire grid with structure after loading data.
this is my plunker http://plnkr.co/edit/?p=preview
A popular design is to show loading status when data is not yet loaded, to do so, you could add a dataLoaded flag to control when the grid is ready, set the flag as true in the success callback of $http.get. See the below:
$scope.dataLoaded = false;
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json').success(function(data) {
// ...
$scope.dataLoaded = true;
});
and in your template, it could be as:
<div id="grid1" ui-grid="gridOptions" class="grid" ng-show="dataLoaded"></div>
<div ng-hide="dataLoaded">Loading...</div>
So I'm using Handsontable to render a grid. (Yes, I am NOT using the ngHandsontable. I started out with that but ran into problems and so I went with just rendering a Handsontable from an angularjs directive.)
I want one column to hold an anchor tag.
I want the anchor tag to have the angularjs ng-click directive.
Everything renders correctly but the ng-click is not called.
Here is my example.
var APP = angular.module('APP', ['controllers']);
angular.module('controllers',[])
.controller('testController', function ($scope) {
$scope.doNgClick = function() {
alert('ng-click');
// console.log('ng-click');
};
$scope.simple = [
{
test: "<a href='javascript:void(0);' ng-click='doNgClick()'>Test</a>"
// test: "<a ng-click='doNgClick()'>Test</a>"
}
];
});
APP.directive('htable',function($compile) {
var directive = {};
directive.restrict = 'A';
directive.scope = {
data : '='
};
directive.link = function(scope,element,attrs) {
var container = $(element);
// var safeHtmlRenderer = function (instance, td, row, col, prop, value, cellProperties) {
// var escaped = Handsontable.helper.stringify(value);
// td.innerHTML = escaped;
// return td;
// };
var settings = {
data: scope.data,
readOnly: true,
colHeaders: ['Link'],
columns: [
{
data: "test",
renderer: "html",
// renderer: safeHtmlRenderer,
readyOnly: true
}
]
};
var hot = new Handsontable( container[0], settings );
hot.render();
// console.log(element.html());
// $compile(element.contents())(scope);
};//--end of link function
return directive;
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//handsontable.com/dist/handsontable.full.css">
</head>
<body>
<div ng-app="APP">
<div ng-controller="testController">
<div htable data="simple"></div>
</div
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script src="//handsontable.com/dist/handsontable.full.js"></script>
</body>
</html>
After much reading and digging here is my own answer.
//-- With help from the following:
//--
//-- http://stackoverflow.com/questions/18364208/dynamic-binding-of-ng-click
//-- http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-3-isolate-scope-and-function-parameters
//--
var APP = angular.module('APP', ['controllers']);
angular.module('controllers',[])
.controller('testController', function ($scope) {
$scope.click = function(msg) {
console.log('ctrl_doNgClick: ng-click: msg: '+msg);
};
$scope.simple = [
{
test: "<a href='javascript:void(0);' ng-click='dir_ctrl_click(\"blah1,blah1\")'>Test 1</a>"
},
{
test: "<a href='javascript:void(0);' ng-click='doClick(\"blah2,blah2\")'>Test 2</a>"
},
{
test: "<a href='javascript:void(0);' ng-click='doClick(\"blah3,blah3\")'>Test 3</a>"
}
];
});
APP.directive('htable',function($compile) {
var directive = {};
directive.restrict = 'A';
directive.scope = {
data : '=',
click : '&'
};
directive.controller = function($scope) {
$scope.dir_ctrl_click = function( msg ) {
console.log('controller: dir_ctrl_click: click via the directive controller method');
$scope.click()(msg);
};
};
directive.link = function(scope,element,attrs) {
var container = $(element);
scope.doClick = function(msg) {
console.log('link: doClick: click via the directive link method');
scope.click()(msg);
};
var linkHtmlRenderer = function (instance, td, row, col, prop, value, cellProperties) {
//-- here is the magic that works
//-- the method, in ng-click, must either be defined here in the link method or in the controller method (the example data contains both)
var el = angular.element(td);
el.html($compile(value)(scope));
return el;
};
var settings = {
data: scope.data,
readOnly: true,
colHeaders: ['Link'],
columns: [
{
data : "test",
renderer : linkHtmlRenderer,
readyOnly : true
}
]
};
var hot = new Handsontable( container[0], settings );
// hot.render();
};//--end of link function
return directive;
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://handsontable.com/dist/handsontable.full.css">
</head>
<body>
<div ng-app="APP">
<div ng-controller="testController">
<div htable data="simple" click="click"></div>
</div
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script src="http://handsontable.com/dist/handsontable.full.js"></script>
</body>
</html>
I'm new to AngularJS and I have a problem loading a submodule.
Heres is my index.php :
<!DOCTYPE html>
<html ng-app="moduleEditing">
<head lang="en">
<meta charset="UTF-8">
<title>Angular Website</title>
<link rel="stylesheet" href="css/styles2.css" />
</head>
<body>
<div class="wrapper" ng-controller="moduleController as modCtrl" style="width: 960px; background-color: #CECECE;">
<h1>{{modCtrl.projectName}}</h1>
<video-module></video-module>
</div>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="modules/video/js/video.js"></script>
<script type="text/javascript" src="js/app2.js"></script>
</body>
</html>
Here is my app2.js :
(function(){
var app;
app = angular.module('moduleEditing',['moduleEditing-video']);
app.controller('moduleController', ['$http', function($http){
this.projectName = 'A page with editable modules';
}]);
})();
And here is the video.js :
(function(){
var app = angular.module('moduleEditing-video', []);
app.directive('videoModule', function(){
return {
restrict: 'E',
templateUrl : 'tpls/video-module.html',
controller : ['$sce', function($sce){
alert('qsdfsdqf');
this.mode = 'edit';
this.moduleName = "Vidéo module";
this.videoTitle = "Première vidéo editable !";
this.videoUrl = $sce.trustAsResourceUrl('http://www.youtube.com/embed/_23NTywgO6E');
this.changeState = function(){
if (this.mode === 'edit') {
this.mode = 'save';
} else {
this.mode = 'edit';
// On met à jour la base de données
}
}
this.changeUrl = function(){
this.videoUrl = $sce.trustAsResourceUrl(this.videoUrl);
}
}],
controllerAs: 'videoCtrl'
};
});
});
When I load the page, I'm getting this error : https://docs.angularjs.org/error/$injector/modulerr?p0=moduleEditing&p1=%5B$injector:modulerr%5D%20http:%2F%2Ferrors.angularjs.org%2F1.3.5%2F$injector%2Fmodulerr%3Fp0%3DmoduleEditing-video%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.3.5%252F%2524injector%252Fnomod%253Fp0%253DmoduleEditing-video%250AA%252F%253C%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A6%253A416%250ALd%252F%253C%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A21%253A338%250Aa%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A20%253A483%250ALd%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A21%253A1%250Ag%252F%253C%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A35%253A84%250Ar%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A7%253A300%250Ag%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A34%253A436%250Ag%252F%253C%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A35%253A101%250Ar%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A7%253A300%250Ag%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A34%253A436%250ALb%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A38%253A154%250Arc%252Fd%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A17%253A339%250Arc%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A18%253A155%250AGd%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A16%253A467%250A%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A249%253A246%250Aa%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A164%253A12%250Agf%252Fc%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A32%253A288%250A%0AA%2F%3C#http:%2F%2Flocalhost%2Fangular%2Fjs%2Fangular.js:6:416%0Ag%2F%3C#http:%2F%2Flocalhost%2Fangular%2Fjs%2Fangular.js:35:358%0Ar#http:%2F%2Flocalhost%2Fangular%2Fjs%2Fangular.js:7:300%0Ag#http:%2F%2Flocalhost%2Fangular%2Fjs%2Fangular.js:34:436%0Ag%2F%3C#http:%2F
By I don't understand what I'm doing wrong.
The submodule doesn't seem to have any code errors and all the files are loading well and in the right order.
Thanks for your ideas.
Pierre M.
In video.js, you're not calling the function - you're missing the () from the end of the statement:
(function(){
var app = angular.module('moduleEditing-video', []);
app.directive('videoModule', function(){
return {
restrict: 'E',
templateUrl : 'tpls/video-module.html',
controller : ['$sce', function($sce){
alert('qsdfsdqf');
this.mode = 'edit';
this.moduleName = "Vidéo module";
this.videoTitle = "Première vidéo editable !";
this.videoUrl = $sce.trustAsResourceUrl('http://www.youtube.com/embed/_23NTywgO6E');
this.changeState = function(){
if (this.mode === 'edit') {
this.mode = 'save';
} else {
this.mode = 'edit';
// On met à jour la base de données
}
}
this.changeUrl = function(){
this.videoUrl = $sce.trustAsResourceUrl(this.videoUrl);
}
}],
controllerAs: 'videoCtrl'
};
});
})();