大佬教程收集整理的这篇文章主要介绍了angularjs – Angular / Ionic中可重复使用的模态,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
以下是如何创建模态(缩写为http://learn.ionicframework.com/formulas/making-modals/).
HTML:
<div class="card" ng-controller='MainCtrl' ng-click="openModal()"> Click here to open the modal </div>
JS:
app.controller('MainCtrl',function($scope,$ionicModal) { $ionicModal.fromTemplateUrl('contact-modal.html',{ scope: $scope,animation: 'slide-in-up' }).then(function(modal) { $scope.modal = modal }) $scope.openModal = function() { $scope.modal.show() } // functions for this modal // ... })
现在这一切都很好,但是如果我想从不同的控制器打开具有相同功能的相同模态,我将不得不复制与之相关的所有代码.
理想情况下,我希望每个模态都有自己的“控制器”(或类似的概念),而不是必须将其所有代码放入控制器中,无论打开它的是什么.
指令代码:
app.directive('myPopUp',['$ionicModal',function($ionicModal) { return { reStrict: 'E',scope: { externalScope : "=" } replace: true,templateUrl: 'path/to/your/template',link: function($scope,$element,$attrs) { $ionicModal.fromTemplateUrl('contact-modal.html',{ scope: $scope.externalScope,animation: 'slide-in-up' }).then(function(modal) { $scope.modal = modal }); $scope.externalScope.openModal = function() { $scope.modal.show() }; } }; }]);
和你的控制器:
app.controller('MainCtrl',['$scope',function($scopE) { $scope.externalScope = {} });
每当你想要将其包含在部分中时,只需添加:
<my-pop-up externalScope="externalScope"></my-pop-up>
该指令可以通过externalScope属性访问控制器,反之亦然.您可以从控制器调用$scope.externalScope.openModal(),它将触发您的指令模式打开.
希望这很有帮助.
以上是大佬教程为你收集整理的angularjs – Angular / Ionic中可重复使用的模态全部内容,希望文章能够帮你解决angularjs – Angular / Ionic中可重复使用的模态所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。