4

I have codes as follow:

<ul id="myTab" class="nav nav-tabs">
        <li class="active"><a href="#user_interface" data-toggle="tab">User Interface</a></li>
        <li class=""><a href="#source_code" data-toggle="tab">Source Code</a></li>
      </ul>
      <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade active in" id="user_interface">
          <textarea data-ui-tinymce id="tinymce1" tinymce-modal-id="myModalTinyMCE" allow-tinymce-image="true" data-ng-model="from_one.from_one"></textarea>
        </div>
        <div class="tab-pane fade" id="source_code" >
            <div style="border-left:1px solid #DDD; border-right:1px solid #DDD; border-bottom:1px solid #DDD">
            <textarea ui-codemirror ui-codemirror-opts="editorOptions" data-ng-model="from_one.from_one">

             </textarea>
            </div>
        </div>
      </div>

When I click on my second tab "Source Code", the content from model binding doesn't show in the code editor as picture below. enter image description here Only when I click again on the code editor content itself the data appeared: enter image description here

Anyone know how to solve this?

user2991183
  • 683
  • 1
  • 12
  • 23
  • possible duplicate of [Codemirror content not visible in bootstrap modal until it is clicked](http://stackoverflow.com/questions/17086538/codemirror-content-not-visible-in-bootstrap-modal-until-it-is-clicked) – RMalke Jul 03 '15 at 19:20

2 Answers2

3

I had seen this problem, but resolved. You can read again docs of ui-codemirror angular at https://github.com/angular-ui/ui-codemirror, has one paragraph:

" ui-refresh directive

If you apply the refresh directive to element then any change to do this scope value will result to a refresh of the CodeMirror instance.

The ui-refresh directive expects a scope variable that can be any thing....

Now you can set the isSomething in the controller scope.

$scope.isSomething = true; "

So, you need change value of 'isSomething' when change tab or other action for codemirror update automatically.

For example: //html: 

<tabset>
    <tab select="selectTab()" heading="Tab 1">
        <div ui-codemirror ng-model="data" ui-codemirror-opts="editorOptions" ui-refresh='refresh'></div>
    </tab>
    <tab>.....</tab>
</tabset>

//js controller: 

$scope.refresh = false;
$scope.selectTab = function() {
    $scope.refresh = !$scope.refresh;
};

Hope help you.

user2289032
  • 31
  • 2
0

It's working you may have some problem with bootsrap.js(Add below the body) file or jquery.

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="myTab" class="nav nav-tabs">
        <li class="active"><a href="#user_interface" data-toggle="tab">User Interface</a></li>
        <li class=""><a href="#source_code" data-toggle="tab">Source Code</a></li>
      </ul>
      <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade active in" id="user_interface">
          <textarea data-ui-tinymce id="tinymce1" tinymce-modal-id="myModalTinyMCE" allow-tinymce-image="true" data-ng-model="from_one.from_one"></textarea>
        </div>
        <div class="tab-pane fade" id="source_code" >
            <div style="border-left:1px solid #DDD; border-right:1px solid #DDD; border-bottom:1px solid #DDD">
            <textarea ui-codemirror ui-codemirror-opts="editorOptions" data-ng-model="from_one.from_one">

             </textarea>
            </div>
        </div>
      </div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Jangya satapathy
  • 866
  • 8
  • 20