Framework7 + AngularJS (DOM изменяется, поэтому angular не может найти контроллеры)

Я использую framework7 и AngularJS для создания мобильного приложения. Мне просто нужен AngularJS для привязки данных.

При переходе по ссылке с framework7 содержимое div меняется. В новом контенте я установил новый контроллер, но angular не может его найти. Есть ли способ уведомить angular об изменении DOM?

Вы можете скачать проект здесь: http://www35.zippyshare.com/v/yDszXHuB/file.html

Этот DemoController в index.html работает. Он изменяет {{title}}

введите здесь описание изображения

Этот DemoControllerAbout в about.html не работает. Это не изменит {{title}}

введите здесь описание изображения

введите здесь описание изображения


javascript data-binding angularjs html-framework-7
person Viktor De Bock    schedule 08.02.2015    source источник
comment
Вы минимизируете свой работающий код js? если да, имя вашего контроллера тоже может быть уменьшено...   -  person Tomer W    schedule 08.02.2015
comment
нет, я не минимизирую свой код. Я думаю, что контроллер не может быть найден, потому что его нет в DOM, когда загружается angularjs.   -  person Viktor De Bock    schedule 08.02.2015
comment
проверьте, возможно, вы помещаете свой скрипт src=app.js после скрипта src=angularjs. это не имеет значения, но попробуйте.   -  person Tomer W    schedule 08.02.2015
comment
script src=app.js загружается после script src=angularjs.   -  person Viktor De Bock    schedule 08.02.2015
comment
попробуйте изменить это ... сначала загрузите свои контроллеры, а затем angular?   -  person Tomer W    schedule 08.02.2015
comment
Я думаю, что это невозможно. Angular не определяется, когда я помещаю app.js выше angular.js.   -  person Viktor De Bock    schedule 08.02.2015

Ответы (3)


arrow_upward
0
arrow_downward

На данный момент интеграция Framework7 и AngularJS находится в стадии разработки. В частности, функции маршрутизации страниц конфликтуют друг с другом, что приводит к нежелательным эффектам.

См. https://github.com/nolimits4web/Framework7/issues/35.

person rchawdry    schedule 09.02.2015

arrow_upward
0
arrow_downward

Вы должны попытаться скомпилировать представления для события pageinit. Попробуй это

Framework7.prototype.plugins.angular = function(app, params) {
    function compile(newPage) {
        try {
            var $page = $(newPage);
            var injector = angular.element("[ng-app]").injector();
            var $compile = injector.get("$compile");
            var $timeout = injector.get("$timeout");
            var $scope = injector.get("$rootScope");
            $scope = $scope.$$childHead;
            $timeout(function() {
                $compile($page)($scope);
            })
        } catch (e) {
            //console.error("Some Error Occured While Compiling The Template", e);
        }
    }

    return {
        hooks: {
            pageInit: function(pageData) {
                compile(pageData.container);
            }
        }
    }

};

и установите этот плагин при инициализации приложения framework7

new Framework7({
  ....
  angular : true
  ....
})

Для получения более подробной информации вы можете обратиться к репозиторию github ниже с полностью работающими демонстрациями https://github.com/ashvin777/framework7.angular

person Ashvin777    schedule 30.06.2016

arrow_upward
0
arrow_downward

Вам нужно перекомпилировать внедряемый фрагмент DOM:

$compile(domSnippet)($scope);
$scope.$apply();

См. дополнительную информацию в этой статье блога, которую я создал: http://www.timo-ernst.net/blog/2016/02/24/how-to-use-ajax-pages-with-angular-1.-x-in-framework7/

На Github также доступен демонстрационный проект: https://github.com/valnub/Framework7-Ajax-Pages-With-Angular-Demo

person Timo Ernst    schedule 18.09.2016