Запуск режима предварительного просмотра путем передачи данных от одного контроллера к другому - PullRequest
Новая
       10

Запуск режима предварительного просмотра путем передачи данных от одного контроллера к другому

0 голосов
/ 13 декабря 2018

Я хочу запустить режим предварительного просмотра с одного контроллера на другой, используя службу angular, но не могу выполнить последний шаг.Я пытаюсь получить URL из переданного параметра в этот ng-src в SideMenuCtrl.Не уверен, как это сделать, чтобы это происходило динамически.

Я видел несколько похожих потоков, но не с таким конечным результатом, как у меня, потому что я пытаюсь в конечном итоге отобразить изображение на экране.

Как связать объявление с переданным параметром с 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>

1 Ответ

0 голосов
/ 13 декабря 2018

Ваш сервис распределяется между вашими контроллерами.Однако я заметил, что с AngularJs свойства контроллера не всегда обновляются при изменении их значения.

Когда это происходит, вы можете использовать функцию, которая возвращает ваше значение, и использовать вызов функции вместо вашего значения в ваших представлениях.Таким образом, обновления обнаруживаются.

(ПРИМЕЧАНИЕ: я переместил div "SideMenuCtrl", потому что с появлением изображения кнопка больше не зависала, вызывая вызов "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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...