Question

当我尝试使用phonegap在AngularJS中打开一个模态时，我遇到了这个问题。

我正在检查设备的连接，如果设备处于离线状态，我需要打开一个模态。

我在index.html页面上有这段代码：

<script type="text/javascript" charset="utf-8" >

    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        var $injector = angular.bootstrap(document, ['sms']);
        var $controller = $injector.get('$controller');
        var scope = $injector.get('$rootScope').$new();
        var DeviceCtrl = $controller("DeviceCtrl", {$scope: scope});
        scope.checkDevice(device.uuid, navigator.network.connection.type);
    }

</script>
...

 <div ng-controller="ModalCtrl" ng-include="'app/partials/modals.html'">

checkDevice上的脚本调用DeviceCtrl功能。好的。

DeviceCtrl:

function DeviceCtrl($scope, $window, Device, $rootScope) {

$scope.checkDevice = function (deviceUuid, networkState) {

    if (networkState == 'none') {
        $rootScope.$broadcast('openConectionless');
    }  
}

我的ModalCtrl：

function ModalCtrl($scope) {
$scope.$on('openConectionless', function() {
    angular.element("#conectionModal").modal("show");

});

}

调用openConectionless侦听器，但angular.element("#conectionModal").modal("show");不会影响模式。

注意：如果我将conectionModal div放在index.html上并在angular.element("#conectionModal").modal("show");而不是DeviceCtrl上调用$rootScope.$broadcast('openConectionless');，则模式会打开。但我想将模态代码移动到另一个html以使代码清洁。所以我创建了ModalCtrl。

有人可以帮助我吗？

Answer 1

我猜你正在使用bootstrap作为模态插件，当html在index.html中基于标记中的bootstrap data属性时，模态会在页面加载时自动初始化。

由于ng-include需要一个AJAX请求，因此当modal插件最初运行时，模态html不存在，因此你的modall永远不会被初始化。

您可以创建一个简单的指令来运行初始化代码并将属性添加到该指令的模态标记

使用ng-include在另一个控制器中打开模态

1 个答案: