javascript - Framework7 + AngularJS（DOM 发生变化，因此 Angular 找不到控制器）

Question

我正在使用 framework7 和 AngularJS 来制作移动应用程序。我只需要 AngularJS 进行数据绑定。

当单击带有 framework7 的链接时，div 的内容会发生变化。在新内容中我设置了一个新的控制器，但是 angular 找不到它。有没有办法通知 Angular DOM 发生了变化？

你可以在这里下载项目：http ://www35.zippyshare.com/v/yDszXHuB/file.html

index.html 中的这个 DemoController 有效。它改变了 {{title}}

about.html 中的这个 DemoControllerAbout 不起作用。它不会改变 {{title}}

Answer 1

目前，Framework7 和 AngularJS 的集成正在进行中。具体来说，页面路由功能相互冲突会导致不良影响。

见https://github.com/nolimits4web/Framework7/issues/35

Answer 2

您需要重新编译正在注入的 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-框架7/

Github 上还有一个演示项目：https ://github.com/valnub/Framework7-Ajax-Pages-With-Angular-Demo

Answer 3

您应该尝试编译 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 repo 以及完整的演示 https://github.com/ashvin777/framework7.angular