AngularJS-自定义指令 - 从控制器绑定模态

Question

我是AngularJ和指示的新手，实际上我和它们有麻烦。我想创建一个自定义指令以在我的离子1应用程序中显示图像。

要实现这一目标，我需要绑定一个对象（"模态"），以便能够将showmodal（）函数链接到我的父视图；还有我要显示的媒体的一个网址：因此，一个对象和字符串。

我使用我在指令中配置的模板图。模态已正确链接到我的父和模板，但是我无法显示我的图像：我在范围，控制器中获取正确的URL，但是NG-SRC没有加载我的URL（在模板中是空的）。我认为问题与对范围行为的不良理解有关，但我无法达到解决方案。

如果您可以帮助我解决这个问题，我会非常感谢！

这是我的一些代码，可以更好地理解问题：

模板：

<div class="modal image-modal transparent">
  <button class="button button-full icon-right ion-close-round" id="button-modal" 
          ng-click="modal.hide()">Close</button>
  <img ng-src="{{url}}" class="fullscreen-image"/>
</div>

父视图：

<div ng-switch-when="image">
  <a class="item item-icon-left" ng-click="vm.modal.show()">
    <i class="icon ion-android-image"></i>
    {{vm.media.filename}}
  </a>
  <image-displayer url="{{vm.media.url}}" modal="vm.modal"></image-displayer>
</div>

指令：

    .directive('imageDisplayer', ['$ionicModal', function($ionicModal) {
      return {
        scope: {},
        restrict: 'E',
        replace: true,
        controller: function() {
          console.log(this);
        },
        controllerAs: 'vm',
        bindToController: {
          modal: '=',
          url: '@'
        },
        tempalteUrl: 'components/medias/image-popover.html',
        link: function(scope, element, attr) {
          console.log(scope);
          var url = scope.url;
          var modal = scope.vm.modal;
          modal.show = showModal;
          modal.close = closeModal;
          function showModal() {
            modal.show();
          };
          function closeModal() {
            modal.hide();
          };
          $ionicModal.fromTemplateUrl('components/medias/image-popover.html', {
            animation: 'slide-in-up'})
            .then(function(modalCreated) {
              modal = modalCreated;
            });
        }
      };

预先感谢您！

---

编辑

所以我找到了解决问题的解决方案：IonicModal创建了自己的范围，这就是为什么它无法访问我的数据。为了解决问题，我添加了：

      $ionicModal.fromTemplateUrl('components/medias/image-popover.html', {
        animation: 'slide-in-up'})
        .then(function(modalCreated) {
          modal = modalCreated;
          modal.url = url; //ADDED THIS LINE
        });

也可以通过将控制器在HTML模板中添加或范围作为参数来修复。

Answer 1

正如您提到的控制器别名作为controllerAs: 'vm'，您应该在模板中访问 {{vm.url}}，如下所示，

<div class="modal image-modal transparent">
  <button class="button button-full icon-right ion-close-round" id="button-modal" 
          ng-click="modal.hide()">Close</button>
  <img ng-src="{{vm.url}}" class="fullscreen-image"/>
</div>

另外，从url="{{vm.media.url}}中卸下括号，因此它将成为<image-displayer url="vm.media.url"

父视图：

<div ng-switch-when="image">
  <a class="item item-icon-left" ng-click="vm.modal.show()">
    <i class="icon ion-android-image"></i>
    {{vm.media.filename}}
  </a>
  <image-displayer url="vm.media.url" modal="vm.modal"></image-displayer>
</div>

另外，您可以将所有代码从link函数移动到controller，并在控制器内部访问this.url。因此，就是这样，var url = this.url; var modal = this.modal;您实际上不需要链接函数。

.directive('imageDisplayer', ['$ionicModal', function($ionicModal) {
      return {
        scope: {},
        restrict: 'E',
        replace: true,
        controller: function() {
          var url = this.url;
          var modal = this.modal;
          //modal.show = showModal; // Is it creating a infinitive call with "showModal"
          modal.close = closeModal;
          /*function showModal() {
            modal.show();
          };*/
          function closeModal() {
            modal.hide();
          };
          $ionicModal.fromTemplateUrl('components/medias/image-popover.html', {
            animation: 'slide-in-up'})
            .then(function(modalCreated) {
              modal = modalCreated;
            });
        },
        controllerAs: 'vm',
        bindToController: {
          modal: '=',
          url: '@'
        },
        tempalteUrl: 'components/medias/image-popover.html'
      };

Note ：我已经评论了modal.show，因为它链接到showModal函数，该功能一次又一次地呼叫modal.show()。

Answer 2

解决方案

因此，我找到了解决问题的解决方案：IonicModal 创建了自己的范围，这就是为什么它无法访问我的数据。为了解决问题，我添加了：

  $ionicModal.fromTemplateUrl('components/medias/image-popover.html', {
    animation: 'slide-in-up'})
    .then(function(modalCreated) {
      modal = modalCreated;
      modal.url = url; //ADDED THIS LINE
    });

也可以通过在HTML模板中添加控制器或范围作为控制器中的离子模态的参数。