CODEWITHSUNDEEP
javascriptangularjs
acz
acz

Reputation: 97

Codemirror's Onload Function

Trying to get an instance of Codemirror using AngularJS's tabs.

<p ng-bind-html="tab.content | unsafe"></p> is where I insert the textArea:

<tabset class="tab-container">
    <tab id = "tabContent" ng-repeat="tab in tabs" active="tab.active"> 
      <script>

      </script>
      <tab-heading>
      <span>{{tab.title}}</span>
      <i class="glyphicon glyphicon-remove" ng-click="removeTab($event, $index)"></i> <!-- the tab close button -->
    </tab-heading>
    <p ng-bind-html="tab.content | unsafe"></p>
  </tab>
  <button class="btn btn-default" ng-click="addTab()"></button>
</tabset>

When I add tab.Content in, I first add HTML tags around the text in order to insert a textarea:

var formatText = function(text){
        return "<textarea ui-codemirror='cmOption' ng-model='cmModel'>" + text + "</textarea>";

    }

the ui-codemirror = 'cmOption' triggers this:

$scope.cmOption = {
    lineNumbers: true,
    indentWithTabs: true,
    onLoad : function(_cm){
        console.log("loaded");
        $scope.modeChanged = function(){
            console.log("loaded");

            _cm.setOption("mode", $scope.mode.toLowerCase());
        };
    }
};

When I add a breakpoint at $scope.cmOption, it succeeds. But when I add a breakpoint at the onLoad function, it's never reached.

Thank you for reading this long post, and trying to help :(

Upvotes: 1

Views: 448

Answers (1)

Buh Buh
Buh Buh

Reputation: 7546

ng-bind-html will not compile the ui-codemirror directive from your string.
To do that you could use $sce.trustAsHtml(), but even then you won't be able to bind to cmOption on your scope.

I think your best bet would be to add the textarea directly into your view. and add the text into your scope's model.

<p>
    <textarea ui-codemirror='cmOption' ng-model='tab.cmModel'></textarea>
</p>

It's not completely clear what your trying to do. If you post the code where you call formatText(text) perhaps I can improve my answer.

EDIT:

I've tweeked my answer a little. I think you need the cmModel/text property to be part of your tab object, so each tab gets its own value. I would still like to see where you are using formatText though.

Upvotes: 1

Related Questions