Add angular-trix to angularjs firebase app

Question

I am making an app using angular and firebase. I want to implement angular-trix editor so that users can post their own articles. But I don't know how to integrate angular-trix. I have included the js files and in app.js I have injected the 'angularTrix'. var app = angular.module('myApp', ['ngRoute', 'ui.bootstrap', 'ngAnimate', 'firebase', 'ngSanitize','angularTrix']); This is my html page.

<div>
<trix-editor ng-model="trix" angular-trix></trix-editor>
<button ng-click="save()">Save!</button></div>

and this is controller

app.controller('profileCtrl', ['$scope', "$routeParams", "$firebaseObject", "$sce", "Auth", function($scope, $firebaseObject, $routeParams, $rootScope, Auth, $sce) {
// Demo controller
console.log('In ctrl');

$scope.trix = '<p>Hello</p>';
$scope.save = function() {
  alert($scope.trix);
};}]);

I don't know what I have to include in a controller. I want that when a user will press submit button, it should extract the HTML and save it to the firebase.

I know how to save data in firebase but not how to extract the HTML from AngularTrix.

A snippet of code of controller would be of much help.

Answer 1

The inner html is stored in the model which you pass to the editor through ng-model attribute like this:

<trix-editor angular-trix ng-model="foo"></trix-editor>

Here, foo would have your markup:

angular.module('trixDemo', ['angularTrix']).controller('trixDemoCtrl',   function($scope) {
  $scope.foo = '<div>Hello world!</div>';
});

Small Demo