Angular integration

[pmcp]

ContentTools is really amazing, and maybe what I have been looking for.

But, question: we are working with an AngularJS driven project. We have a lot of directives, and I was wondering if it is possible to combine AngularJS and ContentTools.

This way I could call in directives, give them specific attributes, and fastly create complex content blocks in the page.

Do you feel it could be possible?

Greetings,

Maarten

[guillaumepiot]

@martyLauders that should be no problem, I can provide you with an example. But first, which version of Angular are you running on your project?

[pmcp]

That would be amazing. I'm running 1.4.

[guillaumepiot]

Hi @martyLauders, I have created a demo which can check here: https://github.com/Cotidia/contenttools-angularjs

Basically, you can create a directive that will bind the DOM element to the editor. Then, the data will retrieve in the scope as $scope.regions.

angular.module('editorApp', [])
    .directive('ngEditor',  function(){

        function link(scope, element, attrs){

            // Initialise the editor
            editor = new ContentTools.EditorApp.get()
            editor.init('[ng-editor]', 'ng-editor')

            // Bind a function on editor save
            editor.bind('save', function(regions, autoSave){

                scope.$apply(function(){
                    scope.regions = regions;
                });

                // "regions" contains all the html for each editable regions
                // Now, "regions" can be saved and used as needed.

            })

        }

        return {
            link: link
        }

    })

In the HTML, you can simply use the directive as follows:

<div ng-editor="my-content">
    <p>Some content...</p>
</div>

<div ng-editor="my-content-another">
    <p>Another content....</p>
</div>

I hope that helps.

[anthonyjb]

Awesome work @guillaumepiot 👍

[pmcp]

Ok, guillaumepiot, that is already incredible :)

Now, what I want to achieve is that, when I add in an attribute, that is linked to a directive, that it renders the directive. For example:

And my directive would be:

directive('testDirective', function() {
return {
        template: '<div>TEST</div>',
        restrict: 'A',
        replace: true,
        link: function(scope) {
           console.log('The directive loaded');
        }
    };
})

Do you think this is possible? I can't seem to get it to work.

I'd put up a quick demo, but am on the road, sorry!

[anthonyjb]

@martyLauders Where would the directive be inserted? Would it be within an editable region or would the directive actaully be an editable region (e.g contain editable content, <p>, <img>, etc.)

Could you provide a bit more detail on what you're trying to achieve?

[pmcp]

The region would be within an editable region. What I am trying to achieve is that I could add just a

, add an attribute, for example: parrallax=true, and the directive would then work on this div.

But now I have the feeling that angularjs doesn't notice the change in attributes.

Does it make sense what I am asking / trying to do?

[anthonyjb]

Hi @martyLauders sorry my knowledge of Angular is really limiting me here. The problem here I think is that if Angular updates the contents of an editable region while it's being edited then the editor and Angular will become out of sync (e.g the editor wont know about the new element added by Angular).

If you can provide an example of the HTML before and after that you're trying to achieve I might be able to provide a solution that's not specific to angular?

[piyushchauhan2011]

👍 Thread helped a lot for clarifying some issues

[iit2011081]

saved event listener is getting called multiple times when I save one field , any solution for this ?

[anthonyjb]

@iit2011081 this sounds like the issue is caused by the editor being initialized multiple times without being destroyed?

[iit2011081]

@anthonyjb this is the whole code which I have written . Please see where I am going wrong.

app.directive('ngEditor',  function(){

    function link(scope, element, attrs){

        // Initialise the editor
        scope.editor = new ContentTools.EditorApp.get();
        scope.editor.init('[ng-editor]', 'ng-editor');

        // Bind a function on editor save
        if (scope.editor._bindings['saved'] && scope.editor._bindings['saved'].length > 0) {

        }
        scope.editor.addEventListener('saved', function (ev) {
            scope.$apply(function(){
                scope.regions = ev.regions;
                console.log(scope.regions);
                console.log(ev.detail().regions);
            });
        });
    }
    return {
        link: link
    }
})