Hi Andrew, It sounds like what you're looking for is scope.$watch(): https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch
Kevin On Tue, Aug 4, 2015 at 1:28 PM, Andrew Hughes <[email protected]> wrote: > 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. > -- 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.
