Using Angular in Kendo Mobile remote views

[Jeffrey]

Hi,

I am managing to integrate Kendo UI Mobile and AngularJS in my new project.  There are a lot of Angular examples of KendoUI Mobile, but what I can found are all single-view.  I want to use Kendo UI Moble application and view mechanism, so my question is -- is it possible to use Angular in remote view?

I made a sample in plunker (http://plnkr.co/edit/AXyCGGMqPSfHZG77S2m4?p=info).  Is there anyway to make ng-controller and {{ text }} in about.html complied by Angular?

Thanks.

[Jeffrey]

I found a way to dynamic compile the HTML in remote view.  

function init(e) {
    angular.element(document.body).injector().invoke(function ($rootScope, $compile) {
        var scope = $rootScope.$new();
        Ctrl2(scope);
        var ele = e.view.element;
        var html = ele.html();
        ele.empty().append($compile(html)(scope));
        scope.$digest();
    })
}

demo

Does this work? I am afraid that replacing the html after view created will cause some problem.

[Petyo]

Hello Jeffrey,

this approach may cause problems with the transitions and/or layout applying, as the view loses the reference to its header/footer elements. We are currently looking into introducing a streamlined AngularJS support in Kendo UI Mobile, and the remote views support is one of the features we are still researching on. For the time being, you may experiment with compiling the HTML without actually removing it - this may work too. 

Regards,
Petyo
Telerik

 

 

[Jeffrey]

Finally, I found I have to modify the ViewEngine code in kendo.all.js as following:

append: function(html, url) {
    var that = this,
        sandbox = that.sandbox,
        urlPath = (url || "").split("?")[0],
        container = that.container,
        views,
        modalViews,
        view;

    if (bodyRegExp.test(html)) {
        html = RegExp.$1;
    }

    //2014-10-02 by Jeffrey, Add Angular compilation process
    if (angular) {
        angular.element(document.body).injector().invoke(function ($rootScope, $compile) {
            var scope = $rootScope.$new();
            sandbox.append($compile(html)(scope));
            scope.$digest();
        });
    }
    else {
        sandbox[0].innerHTML = html;
    }

It seems workable in my project, for your reference.

[Tim]

Hello everyone,

is there any progress on this issue?

"We are currently looking into introducing a streamlined AngularJS support in Kendo UI Mobile, and the remote views support is one of the features we are still researching on."

I am just trying out the latest beta but I am not able to get "remote views with angularjs" up and running. Should this work with the latest beta? Is there any documentation? Or even better a sample how to wire things up correctly?

Thanks a lot for any ideas and help as this thing is driving me crazy!
Cheers,
Tim.

[Petyo]

Hi Tim,

the remote views should work as expected with the beta release, they don't need anything special. In case you are experiencing issues with your implementation, please submit a runnable example of your case as a support ticket - we will review it and advise you further. 

Regards,
Petyo
Telerik

 

 

[Tim]

Hi Petyo,

thanks a lot for your answer. That's good to hear that it should work. As you suggested, I submitted a support ticket as it is still not working for me. 

Thank you for your help.
Kind regards,
Tim.