在IonicFramework中使用modal from指令

时间:2016-02-04 13:43:45

标签: javascript angularjs ionic-framework

我有一个指令,在加载数据后显示模态窗口:

.directive('nwAssets', function () {
        return {
            restrict: 'A',
            templateUrl: 'app/dashboard/templates/nw-assets.html',
            controller: controller,
            scope: {
                assets: '=nwAssets'
            }
        };

        function controller($scope, $ionicModal, NwPath) {
            $scope.pathToThumb = NwPath.toThumb;
            $scope.pathToSrc = NwPath.toSrc;
            $scope.fileName = NwPath.fileName;

            $ionicModal.fromTemplateUrl('app/dashboard/templates/nw-modal.html', {
                scope: $scope,
                animation: 'slide-in-down'
            }).then(function (modal) {
                $scope.modal = modal;
            });

            $scope.openModal = function (src, fileName) {
                $scope.pathToSrc = src;
                $scope.fileName = fileName;
                $scope.modal.show();
            };

            $scope.closeModal = function () {
                $scope.modal.hide();
            };
        }
    });

我使用的工厂:

.factory('NwPath', function (baseUrl) {
        return {
            toThumb: toThumb,
            toSrc: toSrc,
            fileName: fileName

        };

        function toThumb(asset) {
            return baseUrl + '/uploads/file/' + asset.guid + '/' + assetThumbFileName(asset);
        }

        function toSrc(asset) {
            return baseUrl + '/uploads/file/' + asset.guid + '/' + asset.file_name;
        }

        function assetThumbFileName(asset) {
            var fileNames = asset.file_name.split('.');
            fileNames[0] = fileNames[0] + '_pi_200x200';
            return fileNames.join('.');
        }

        function fileName (asset) {
            return asset.file_name;
        }
    });

我称之为模态的模板:

<div ng-repeat="asset in assets">
<img ng-if="asset.mime_type.indexOf('image') === 0"
     ng-src="{{pathToThumb(asset)}}"
     ng-click="openModal(pathToSrc(asset), fileName(asset))"
     alt="" />

模态关闭的模板:

<ion-modal-view>
<ion-header-bar class="bar bar-header bar-positive">
    <h1 class="title">{{fileName}}</h1>
    <div class="buttons">
        <button class="button button-clear" ng-click="closeModal()">Close</button>
    </div>
</ion-header-bar>
<ion-content class="text-center">
    <img ng-src="{{pathToSrc}}" alt="" />
</ion-content>

它只工作一次:模态打开,abd数据显示。但是在模态关闭之后,它不会在下次显示并显示错误:&#34; v6.pathToSrc不是函数&#34; 请帮忙)

0 个答案:

没有答案