Angularjs ng-model become one way inside the kendo ui tabstrip

Question

I am using angularjs+kendoui for a small project. (I am learning angularjs)

However I found that ng-model only work one way (it can populate from controller/model to UI) but when I change the UI, it can't populate the model.

Below is a simple example.

I have a text box inside the tab. When I update the text, the model was not updated. I have another text box outside the tab. When I update the text, the model was updated. see the sample below http://plnkr.co/edit/tknizoUTtheuOoAUZv4E?p=preview

score 1 · Accepted Answer · edited May 23 '17 at 11:56

Kendo directive create a new scope. You need to have '.' in your ng-model. It is recommended.

app.controller("myCtrl", function ($compile, $scope) {
$scope.o = {};
 $scope.o.testText = 'hello'
$scope.o.testText2 = 'hello2'
});

and in your view

<div id="tabstrip" kendo-tab-strip>
  <ul>
    <li class="k-state-active">Tab 1</li>
    <li>Tab 2</li>
  </ul>

  <div>
    <input type="text" ng-model="o.testText" />
  </div>
  <div>
    [Page 2]
  </div>
</div>
    <div>
    <span>Tab Text </span></span><p>{{o.testText}}</p>

    </div>
    <span>Outside Tab Text </span>
    <input type="text" ng-model="o.testText2" />
    <p>{{o.testText2}}</p>

  </body>

You can find more detail about this feature of angular in Scope inheritance in Angular

Angularjs ng-model become one way inside the kendo ui tabstrip

1 Answers1