Question

我是angularjs和指令的新手，我实际上遇到了麻烦。我想创建一个自定义指令来在我的离子1应用程序中显示图像。

为了实现这一点，我需要绑定一个对象（'modal'），以便能够将showModal（）函数链接到我的父视图;还有我想要显示的媒体网址：所以，一个对象和一个字符串。

我使用我在指令中配置的templateUrl。模态正确地链接到我的父和模板，但我无法显示我的图像：我在我的范围，控制器中获得了正确的URL，但ng-src没有加载我的网址（在我的模板中它是空的）。我认为这个问题与对范围行为的不理解有关，但我无法达成解决方案。

如果你能帮我解决这个问题，我会非常感激！

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

模板：

<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'
      };

注意：我对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模板中添加控制器或将范围作为参数添加到控制器中的离子模态来解决。

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

修改

2 个答案: