Question

我想使用角度服务将预览模式从一个控制器触发到另一个控制器，但无法完成最后一步。我试图从传递的参数的URL到SideMenuCtrl中的ng-src。不知道如何做才能使它动态发生。

我看到了一些类似的线程，但是没有像我的最终结果那样，因为我试图最终在屏幕上显示图像。

我如何将传递的参数advert链接到vm.previewImage/。

var app = angular.module('app', [])

.service('appState', function() {
    this.data = {
      preview: {
        enabled: false,
        advert: ''
      }
    };
    
    this.previewAdvert = function(advert) {
      //flick the inPreview variable
      this.data.preview = {
        enabled: !this.data.preview.enabled,
        advert: advert
      }
    }
    
})

.controller('SideMenuCtrl', function(appState) {
    var vm = this;
    vm.preview = appState.data.preview;
})

.controller('ContentCtrl', function(appState) {
   var vm = this;
   vm.advertUrl = 'http://1.bp.blogspot.com/-vXmHgrrk4ic/UpTbgBkp8eI/AAAAAAAAFjQ/ajBQ9WvwNUc/s1600/gloomy-stripes-dark-background-tile.jpg';
   
   vm.previewAdvert = function() {
     console.log('preview/stop preview');
     appState.previewAdvert(vm.advertUrl);
   }
   
});

<html ng-app="app">
  <body>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    
    <div ng-controller="SideMenuCtrl as vm">
      <div class="ads" ng-if="vm.preview.enabled">
        <img ng-src="{{vm.previewImage}}">
      </div>
    </div>
    
    <div ng-controller="ContentCtrl as vm">
      <label for="adInput">Advert URL</label>
      <input type="url" id="adInput" ng-model="vm.advertUrl"></input>
      <button ng-mouseenter="vm.previewAdvert()" ng-mouseleave="vm.previewAdvert()">Preview</button>
    </div>
    
  </body>
</html>

Answer 1

您的服务可以在控制器之间共享。但是我注意到，使用AngularJs更改属性时，控制器的属性并不总是更新。

发生这种情况时，可以使用返回值的函数，并使用函数调用代替视图中的值。这样，就可以检测到更新。

（注意：我将“ SideMenuCtrl” div移到了下面，因为随着图像出现，按钮不再悬停，导致调用了“ mouseleave”，并产生了闪烁）

var app = angular.module('app', [])

.service('appState', function() {
    this.data = {
      preview: {
        enabled: false,
        advert: ''
      }
    };
    
    this.previewAdvert = function(advert) {
      //flick the inPreview variable
      this.data.preview = {
        enabled: !this.data.preview.enabled,
        advert: advert
      }
    }
    
})

.controller('SideMenuCtrl', function(appState) {
    var vm = this;
    vm.getPreviewImage = function(){
        return appState.data.preview.advert;
    };
    vm.isPreviewEnabled = function(){
        return appState.data.preview.enabled;
    };
})

.controller('ContentCtrl', function(appState) {
   var vm = this;
   vm.advertUrl = 'http://1.bp.blogspot.com/-vXmHgrrk4ic/UpTbgBkp8eI/AAAAAAAAFjQ/ajBQ9WvwNUc/s1600/gloomy-stripes-dark-background-tile.jpg';
   
   vm.previewAdvert = function() {
     console.log('preview/stop preview');
     appState.previewAdvert(vm.advertUrl);
   }
   
});

<html ng-app="app">
  <body>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    
    <div ng-controller="ContentCtrl as vm">
      <label for="adInput">Advert URL</label>
      <input type="url" id="adInput" ng-model="vm.advertUrl"></input>
      <button ng-mouseenter="vm.previewAdvert()" ng-mouseleave="vm.previewAdvert()">Preview</button>
    </div>

    <div ng-controller="SideMenuCtrl as vm">
      <div class="ads" ng-if="vm.isPreviewEnabled()">
        <img ng-src="{{vm.getPreviewImage()}}">
      </div>
    </div>
    
  </body>
</html>

通过将数据从一个控制器传递到另一个控制器来触发预览模式

1 个答案: