Hello all,
I'm new to Angular and would like to know if there's a best-practice for
solving the following. I have it working as it is, but I'd like to know if
there was a better way. I've included the relevant code below.
project.html iterates over "items" as "item" objects, creating a series of
"my-item-editor" directives. These directives include the item-editor.html
template, which uses Quill to create a series of editors for the items.
Creating the initial HTML is a snap. The challenge was figuring out
when/how to run the Quill constructor.
Initially I thought I would be able to do it in the directive's link
callback. Unfortunately, I found that at this point expressions in the
templates had not been resolved, so that the title element as still
"<h2>{{::title}}</h2>" and not the actual title.
The solution I found online was to use $timeout. This works; however, it
feels a bit like a hack. Surely there's a better, more direct way to
trigger some code to execute once the expressions have been resolved to
their actual values.
Also, if anybody has any other general, broader suggestions about how to go
about achieving this, I'd appreciate the advice!
Thanks - Andrew
*project.js*
angular.module('clientApp')
.controller('ProjectCtrl', function ($scope) {
this.items = [
{
"_id": "1",
"title": "The first scene",
"text": "And then something awesome happened..."
},
{
"_id": "2",
"title": "The second scene",
"text": "Oh shit..." }
];
})
.directive('myItemEditor', ['$timeout', function ($timeout) {
function link(scope, element, attrs) {
scope.id = scope.item._id;
scope.text = scope.item.text;
scope.title = scope.item.title;
var editorId = '#item-editor-'+scope.item._id;
var toolbarId = '#item-toolbar-'+scope.item._id;
$timeout(function() {
var editorElement = $(editorId)[0];
var toolbarElement = $(toolbarId)[0];
createEditors(editorElement, toolbarElement);
},0);
}
return {
restrict: 'E',
templateUrl: 'views/item-editor.html',
link:link
};
}]);
*project_custom.js*
function createEditors(editorElem, toolbarElem) {
var quill = new Quill(editorElem);
quill.addModule('toolbar', { container: toolbarElem });
}
*project.html*
<div ng-repeat="item in project.items">
<my-item-editor></my-item-editor>
</div>
*item-editor.html*
<h2>{{::title}}</h2>
<!-- Create the toolbar container -->
<div class="quill-item-toolbar" ng-attr-id="item-toolbar-{{::id}}">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>
<!-- Create the editor container -->
<div class="quill-item-text" ng-attr-id="item-editor-{{::id}}" >
<div>{{::text}}</div>
</div>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
