https://plnkr.co/edit/n2RANdhtRYIGQURVIElY?p=preview

Diharapkan

Setelah login, ketika Anda mengklik Hitung nomor merah akan berubah di daftar Tag dan cocok dengan nomor di daftar Ticker, tetapi tidak akan terjadi apa pun di daftar Umpan.

Hasil

Setelah login, mengklik Hitung di daftar Ticker, nomor merah muncul di daftar Tag dan daftar Feed.

enter image description here


Kode plnkr lengkap

var tickers = angular.module('tickers', ['ui.router'])

tickers.config(function($stateProvider) {
  
  const tickers = {
    name: 'tickers',
    url: '/tickers',
    parent: 'dashboard',
    templateUrl: '<p></p>'
  }
  
  $stateProvider
    .state(tickers);
  
})

tickers.component('tickersModule', {
  templateUrl: 'tickers-list.html',
  controller: function($scope, $state) {
    console.log('Tickers init', $state.params)

    $scope.counter = 0;
    
    $scope.increase = function() {
      $scope.counter++;
      $state.go('tags', { counter: $scope.counter }).then(function() {
      });
    }
  }
})



var tags = angular.module('tags', ['ui.router'])

tags.config(function($stateProvider) {
  
  const tags = {
    name: 'tags',
    url: '/tags',
    parent: 'dashboard',
    params: {
      counter: 0
    },
    template: '<p class="counter">{{ counter }}</p>',
    bindToController: true,
    controller: function($scope, $state) {
      console.log('tags state object', $state)
      $scope.counter = $state.params.counter;
    }
  }
  
  $stateProvider
    .state(tags);
  
})

tags.component('tagsModule', {
  templateUrl: 'tags-module-template.html',
  controller: function($scope, $state) {
    
  }
})


var feed = angular.module('feed', ['ui.router'])

feed.config(function($stateProvider) {
  
  const feed = {
    name: 'feed',
    url: '/feed',
    parent: 'dashboard',
    templateUrl: '<em>Feed items go here.</em>'
  }
  
  $stateProvider
    .state(feed);
  
})

feed.component('feedModule', {
  templateUrl: 'feed-module-template.html',
  controller: function($scope, $state) {
    console.log('Feed init', $state.params)

  }
})


var routerApp = angular.module('routerApp', ['ui.router', 'tickers', 'tags', 'feed']);

routerApp.config(function($stateProvider, $urlRouterProvider) {
    
    $urlRouterProvider.otherwise('/login');

    const login = {
      name: 'login',
      url: '/login',
      templateUrl: 'login.html',
      bindToController: true,
      controllerAs: 'l',
      controller: function($state) {
        this.login = function() {
          $state.go('dashboard', {})
        }
      }
    }

    const dashboard = {
      name: 'dashboard',
      url: '/dashboard',
      templateUrl: 'dashboard.html',
      controller: function($state) {
        console.log('Dashboard state init', $state)
      }
    }

    $stateProvider
        .state(login)
        .state(dashboard);

})
.run(['$rootScope', '$location', '$state',
function($rootScope, $location, $state) {
    $rootScope.$on("$stateChangeError", console.log.bind(console));
    $rootScope.$on('$stateChangeStart',
        function(event, toState, toParams, fromState, fromParams, options) {
            // console.log(' ')
            // console.log('toState', toState)
            // console.log('toParams', toParams)
            // console.log('fromState', fromState)
            // console.log('fromParams', fromParams)
            // console.log('options', options)
        });
}]);

Tag-modul-template.html

<div class="jumbotron text-center">
  <h2>Tags list</h2>
  <div ui-view></div>
</div>

Feed-module-template.html

<div class="jumbotron text-center">
  <h2>Feed list</h2>
  <div ui-view></div>
</div>

Dashboard.html yang terkait dengan status dasbor di modul routerApp. Berisi semua 3 komponen:

<div class="jumbotron text-center">
    <h1>The Dashboard</h1>
</div>

<div class="row">
  <tickers-module></tickers-module>
  <tags-module></tags-module>
  <feed-module></feed-module>
</div>

Modul tag, konfigurasi status, dan kode komponen:

var tags = angular.module('tags', ['ui.router'])

tags.config(function($stateProvider) {
  
  const tags = {
    name: 'tags',
    url: '/tags',
    parent: 'dashboard',
    params: {
      counter: 0
    },
    template: '<p class="counter">{{ counter }}</p>',
    bindToController: true,
    controller: function($scope, $state) {
      console.log('tags state object', $state)
      $scope.counter = $state.params.counter;
    }
  }
  
  $stateProvider
    .state(tags);
  
})

tags.component('tagsModule', {
  templateUrl: 'tags-module-template.html',
  controller: function($scope, $state) {
    
  }
})

Modul umpan, konfigurasi status, dan kode komponen

var feed = angular.module('feed', ['ui.router'])

feed.config(function($stateProvider) {
  
  const feed = {
    name: 'feed',
    url: '/feed',
    parent: 'dashboard',
    templateUrl: '<em>Feed items go here.</em>'
  }
  
  $stateProvider
    .state(feed);
  
})

feed.component('feedModule', {
  templateUrl: 'feed-module-template.html',
  controller: function($scope, $state) {
    console.log('Feed init', $state.params)

  }
})
1
Leon Gaban 16 Maret 2017, 19:11

2 jawaban

Jawaban Terbaik

https://plnkr.co/edit/5A5YFEWZ7ZTzRJloxgka?p=preview

Saya akhirnya dapat memperbaiki masalah ini dengan menggunakan tampilan bernama di dalam Tag $state objek.

const tags = {
  name: 'tags',
  url: '/tags',
  parent: 'dashboard',
  params: {
    counter: 0
  },
  views: {
    'default' : { template: '<p>Hi this is Tags</p>' },
    'title' : {
      template: '<p>Tags Title! {{ number }}</p>',
      controller: function($scope, $state) {
        $scope.number = Math.random();
      }
    },
    'counter': {
      template: '<p class="counter">Counter:{{ counter }}</p>',
      bindToController: true,
      controller: function($scope, $state) {
        console.log('tags state object', $state);
        $scope.counter = $state.params.counter;
      }
    }
  }
}

$stateProvider.state(tags);

Sekarang dengan tampilan bernama ini, saya dapat menggunakan ui-view dengan nama tertentu untuk menargetkan lokasi variabel penghitung pembaruan yang berasal dari tickers.component.

Objek params masih terkait dengan status tags, sehingga state.go yang masuk dari ticker akan mengirimkan parameter, namun sub tampilan tag yang diberi nama sekarang akan berisi penghitung. Dan itu tidak akan keluar ke tampilan ui yang tidak disebutkan namanya atau bernama di feed.component.

HTML template tag:

<div class="jumbotron text-center">
  <h2>Tags list</h2>
  <div ui-view="default"></div>

  <div class="row">
    <div>
      Tags title here:
      <div ui-view="title"></div>
    </div>

    <div>
      Tags counter here:
      <div ui-view="counter"></div>
    </div>
  </div>

</div>

Tickers.component masih menargetkan status tags dan meneruskan variabel penghitung.

$scope.increase = function() {
  $scope.counter++;
  $state.go('tags', { counter: $scope.counter });
}
1
Leon Gaban 16 Maret 2017, 18:09

Berikut adalah tautan Plunker yang memiliki fungsi yang diinginkan.

Sebelum masuk ke solusi saya, mari kita lihat solusi Anda.

Alasan mengapa itu bekerja seperti yang Anda gambarkan adalah karena ui-router melakukan apa yang seharusnya dilakukan :).

Meskipun Anda telah mencoba memisahkan pemuatan templat ke dalam modul terpisah, itu tidak berjalan seperti yang Anda rencanakan. Segera setelah status dashboard dimuat, semua komponen Anda juga dimuat. Alasan mengapa tags-module dan feed-module diperbarui secara bersamaan adalah karena masing-masing template memiliki ui-view di dalamnya. Jadi ketika Anda mengklik tombol dan menjalankan $state.go("tags"..., pada dasarnya Anda telah memuat template status tags di setiap komponen dengan atribut ui-view di dalamnya.

Solusi yang saya berikan menggunakan $rootScope.$emit dan $rootScope.$on untuk mengirim dan menerima data. Saya harus mengatakan bahwa Anda harus menghindari penggunaan $rootScope sebanyak yang Anda bisa, tetapi demi singkatnya saya menggunakannya di sini (malu saya) dan karena tidak ada hubungan orang tua-anak di sini untuk hanya menggunakan $scope. Solusi lain yang mungkin:

  • Susun ulang aplikasi Anda sehingga komponen Anda dapat saling berkomunikasi.
  • Gunakan sub library pub milik Anda sendiri atau pihak ketiga sehingga komponen Anda dapat saling berbicara.

Semoga ini membantu.

2
Emin Laletovic 16 Maret 2017, 17:45