Angularjs 最简单的角度UI引导模式

我想知道我是否可以像bootstrap中的原始模式那样简化ui引导模式，因为angular是一堆代码，我真的对angular的ui引导模式做了一场噩梦。代码似乎只是用于定制modals等，但您需要为open等添加函数

如果我需要其他模板的其他模态呢？或者如果我需要很多情态动词呢

这是我从ui引导参考帮助中获得的代码。我试图删除所有不必要的代码，但仍然太复杂

查看

<div ng-controller="ModalDemoCtrl as $ctrl" class="modal-demo">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body" id="modal-body">
            <ul>
                <li ng-repeat="item in $ctrl.items">
                    <a href="#" ng-click="$event.preventDefault(); $ctrl.selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ $ctrl.selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
        </div>
    </script>


    <button type="button" class="btn btn-default" ng-click="$ctrl.open('lg')">Large modal</button>
</div>

我是模态的！




选定：{{$ctrl.Selected.item}
好啊
取消
大模态

应用程序

// MODAL CONTROLLERS
myApp.controller('ModalDemoCtrl', function ($uibModal, $log, $document) {
    var $ctrl = this;
    $ctrl.items = ['item1', 'item2', 'item3'];

    $ctrl.animationsEnabled = true;

    $ctrl.open = function (size, parentSelector) {
        var parentElem = parentSelector ? 
        angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;
        var modalInstance = $uibModal.open({
            animation: $ctrl.animationsEnabled,
            ariaLabelledBy: 'modal-title',
            ariaDescribedBy: 'modal-body',
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            controllerAs: '$ctrl',
            size: size,
            appendTo: parentElem,
            resolve: {
                items: function () {
                    return $ctrl.items;
                }
            }
        });

        modalInstance.result.then(function (selectedItem) {
            $ctrl.selected = selectedItem;
        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };

    $ctrl.openComponentModal = function () {
        var modalInstance = $uibModal.open({
            animation: $ctrl.animationsEnabled,
            component: 'modalComponent',
            resolve: {
                items: function () {
                    return $ctrl.items;
                }
            }
        });

        modalInstance.result.then(function (selectedItem) {
            $ctrl.selected = selectedItem;
        }, function () {
            $log.info('modal-component dismissed at: ' + new Date());
        });
    };

    $ctrl.openMultipleModals = function () {
        $uibModal.open({
            animation: $ctrl.animationsEnabled,
            ariaLabelledBy: 'modal-title-bottom',
            ariaDescribedBy: 'modal-body-bottom',
            templateUrl: 'stackedModal.html',
            size: 'sm',
            controller: function($scope) {
                $scope.name = 'bottom';  
            }
        });

        $uibModal.open({
            animation: $ctrl.animationsEnabled,
            ariaLabelledBy: 'modal-title-top',
            ariaDescribedBy: 'modal-body-top',
            templateUrl: 'stackedModal.html',
            size: 'sm',
            controller: function($scope) {
                $scope.name = 'top';  
            }
        });
    };

    $ctrl.toggleAnimation = function () {
        $ctrl.animationsEnabled = !$ctrl.animationsEnabled;
    };
});

// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.

myApp.controller('ModalInstanceCtrl', function ($uibModalInstance, items) {
    var $ctrl = this;
    $ctrl.items = items;
    $ctrl.selected = {
        item: $ctrl.items[0]
    };

    $ctrl.ok = function () {
        $uibModalInstance.close($ctrl.selected.item);
    };

    $ctrl.cancel = function () {
        $uibModalInstance.dismiss('cancel');
    };
});

// Please note that the close and dismiss bindings are from $uibModalInstance.

myApp.component('modalComponent', {
    templateUrl: 'myModalContent.html',
    bindings: {
        resolve: '<',
        close: '&',
        dismiss: '&'
    },
    controller: function () {
        var $ctrl = this;

        $ctrl.$onInit = function () {
            $ctrl.items = $ctrl.resolve.items;
            $ctrl.selected = {
                item: $ctrl.items[0]
            };
        };

        $ctrl.ok = function () {
            $ctrl.close({$value: $ctrl.selected.item});
        };

        $ctrl.cancel = function () {
            $ctrl.dismiss({$value: 'cancel'});
        };
    }
});

//模态控制器
控制器（'ModalDemoCtrl'，函数（$uibModal，$log，$document）{
var$ctrl=this；
$ctrl.items=['item1'，'item2'，'item3']；
$ctrl.AnimationEnabled=true；
$ctrl.open=函数（大小，父选择器）{
var parentElem=parentSelector？
angular.element（$document[0].querySelector（'.modal demo'+parentSelector））：未定义；
var modalInstance=$uibModal.open({
动画：$ctrl.AnimationEnabled，
ariaLabelledBy:“模态标题”，
由“模态体”描述，
templateUrl:'myModalContent.html'，
控制器：“ModalInstanceCtrl”，
controllerAs:“$ctrl”，
尺寸：尺寸，
附件：parentElem，
决心：{
项目：功能（）{
返回$ctrl.items；
}
}
});
modalInstance.result.then（函数（selectedItem）{
$ctrl.selected=selectedItem；
}，函数（）{
$log.info（'Modal disposed at:'+new Date（））；
});
};
$ctrl.openComponentModal=函数（）{
var modalInstance=$uibModal.open({
动画：$ctrl.AnimationEnabled，
组件：“modalComponent”，
决心：{
项目：功能（）{
返回$ctrl.items；
}
}
});
modalInstance.result.then（函数（selectedItem）{
$ctrl.selected=selectedItem；
}，函数（）{
$log.info（'modal-component在：'+新日期（）解散）；
});
};
$ctrl.openMultipleModals=函数（）{
$uibModal.open({
动画：$ctrl.AnimationEnabled，
ariaLabelledBy:“模式标题底部”，
Ariabeddy:“模态体底部”，
templateUrl:'stackedModal.html'，
尺寸：'sm'，
控制器：功能（$scope）{
$scope.name='bottom'；
}
});
$uibModal.open({
动画：$ctrl.AnimationEnabled，
ariaLabelledBy:“模态标题顶部”，
Ariabedby:‘模态车身顶部’，
templateUrl:'stackedModal.html'，
尺寸：'sm'，
控制器：功能（$scope）{
$scope.name='top'；
}
});
};
$ctrl.TogleAnimation=函数（）{
$ctrl.AnimationEnabled=！$ctrl.AnimationEnabled；
};
});
//请注意，$uibModalInstance表示模式窗口（实例）依赖关系。
//它与上面使用的$uibModal服务不同。
myApp.controller（'ModalInstanceCtrl'，函数（$uibModalInstance，items）{
var$ctrl=this；
$ctrl.items=项目；
$ctrl.selected={
项目：$ctrl.items[0]
};
$ctrl.ok=函数（）{
$uibModalInstance.close（$ctrl.selected.item）；
};
$ctrl.cancel=函数（）{
$uibModalInstance.discover（'cancel'）；
};
});
//请注意，close和disclose绑定来自$uibModalInstance。
myApp.component（'modalComponent'{
templateUrl:'myModalContent.html'，
绑定：{
解析：“我必须同意您的意见，我发现文档对我来说有点冗长。正如您所看到的，我的templateURL引用的是同一目录中包含模式内容的一个单独的.html文件

我的解决方案是这样的：

<div class="modal-header">
  <h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="landingModalCtrl.yes()">yes</button>
  <button class="btn btn-warning" ng-click="landingModalCtrl.no()">no</button>
</div>

在我的控制器中：

myApp.controller('ModalController', function ($log, $uibModal, $scope) {
  $log.debug('ModalController');

  this.createModal = function() {
    let modal = $uibModal.open({
      backdrop: 'static',
      keyboard: true,
      backdropClick: false,
      template: require('./modal-content.html'),
      scope: $scope
    });

    $scope.modalInstance = modal;
    return modal.result;
  };

  this.triggerModal = function() {
    this.createModal()
    .then( (data) => {
      this.handleSuccess(data);
    })
    .then(null, (reason) => {
      this.handleDismiss(reason);
    });
  };

  this.yes = function() {
    $scope.modalInstance.close('Yes Button Clicked');
  };

  this.no = function() {
    $scope.modalInstance.dismiss('No Button Clicked');
  };

  this.handleSuccess = function(data) {
    $log.info('Modal closed: ' + data);
  };

  this.handleDismiss = function(reason) {
    $log.info('Modal dismissed: ' + reason);
  };
}

下面是“modal content.html”的内容：

<div class="modal-header">
  <h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="landingModalCtrl.yes()">yes</button>
  <button class="btn btn-warning" ng-click="landingModalCtrl.no()">no</button>
</div>


我是模态的！

项目1
项目2
项目3

对
不

如果你在应用程序中有许多不同的modals，创建一个包含所有
$uibModal.open（）的服务，希望这会有所帮助！
代码可以减少大量代码重复，因为我知道您想要一个根据ID和与该ID相关的内容打开的模式，对吗？问题是，我实现了，并且它可以工作，但对于一个模式模板，我只能有一个内容安排，我不太了解，但可以使用不同的设计？或n是否需要在我的应用程序中为和其他模式复制整个代码？我注意到的另一件事是，我不能在控制器外部使用该模式。我已经有一个名为homeController的控制器，并且在内部我为该模式设置了de控制器。对于我来说，与原始引导方式相比，这是一个完全混乱的方式。谢谢！我将尝试此解决方案。您是ri嗯，我对文档了解不多，但ui boostrap文档很难理解，特别是对于有设计背景的人来说。没问题，我希望这会有所帮助。我对Angular的实现与我们在这里使用的语法略有不同（实际上我在我的应用程序中使用的是组件化结构）但我修改了它，使之类似于ui引导文档中的示例。如果我能进一步帮助您，请告诉我。