$状態の内容が変更された場合のホームページ上の指示内容の更新

Question

私はここにトリッキーなものがあります。私はng-repeatの中にあるアイテムを示す指示文も持っています。この指示文も別のレイアウトで表示する特定のビューもあります。

私の問題点は、$scope.itemsを私の画面にリフレッシュするときに、メニューを使用してホームページに戻ると、そのページがリロードされるまでそのディレクティブが更新されないということです。

内容が変更されたときにディレクティブを更新する方法はありますか？このような

何かが、私はホームページや状態表示ページ間の同期を作り、ここでfiddle for a better understanding

Answer 1

あなたの答えをした状態とホームページ

からすべてのデータを管理ディレクティブです。

angular.module('DemoApp', ['ionic']) 
 

 
.run(function($rootScope){ 
 
$rootScope.items = []; 
 
}) 
 
.config(function($stateProvider, $urlRouterProvider) { 
 

 
    $stateProvider 
 
    .state('eventmenu', { 
 
     url: "/event", 
 
     abstract: true, 
 
     templateUrl: "templates/event-menu.html" 
 
    }) 
 
    .state('eventmenu.home', { 
 
     url: "/home", 
 
     views: { 
 
     'menuContent' :{ 
 
      templateUrl: "templates/home.html" 
 
     } 
 
     } 
 
    }) 
 
    
 
    .state('eventmenu.attendees', { 
 
     url: "/attendees", 
 
     views: { 
 
     'menuContent' :{ 
 
      templateUrl: "templates/hello.html", 
 
      controller: "helloCtrl" 
 
     } 
 
     } 
 
    }) 
 
    
 
    $urlRouterProvider.otherwise("/event/home"); 
 
}) 
 

 
.controller('MainCtrl', function($scope) {}) 
 

 

 
/******** 
 
      
 
      ██ ██ ███████ ██████ ███████ 
 
      ██ ██ ██  ██ ██ ██ 
 
      ███████ █████ ██████ █████ 
 
      ██ ██ ██  ██ ██ ██ 
 
      ██ ██ ███████ ██ ██ ███████ 
 
      
 

 

 
********/ 
 

 
.controller('helloCtrl', function($scope, $interval, $rootScope) { 
 
    
 
$scope.$on('$ionicView.beforeLeave', function() { 
 
      
 
     }); 
 
    
 
}).directive('helloWorld', function ($http, $q, $interval, $rootScope) { 
 
    return { 
 
    restrict: 'AECM', 
 
    replace: true, 
 
    templateUrl: 'hellotemplate.html', 
 
    link: function ($scope, event, attr){ 
 
    console.log('vcae') 
 
    \t $scope.newData = function(){ 
 
     \t \t console.log("now I have new Data"); 
 
      $http.get("https://api.github.com/users/maxmpz/repos").then(function(response){ 
 
     $scope.helloData = {} 
 
     $rootScope.items = response.data; 
 
     $scope.helloData.data = $rootScope.items; 
 
     
 
     
 
     }); 
 
     }; 
 
     $http.get("https://api.github.com/users/distante/repos").then(function(response){ 
 
     $scope.helloData = {} 
 
     $rootScope.items = response.data; 
 
     $scope.helloData.data = $rootScope.items; \t 
 
     
 
     }); 
 
     
 
     
 
    } 
 
    }; 
 
});

<link href="https://code.ionicframework.com/1.3.1/css/ionic.min.css" rel="stylesheet"/> 
 
<script src="https://code.ionicframework.com/1.3.1/js/ionic.bundle.js"></script> 
 
<link href="http://code.ionicframework.com/1.0.0-rc.0/css/ionic.css" rel="stylesheet"/> 
 

 
<div ng-controller="MainCtrl" ng-app="DemoApp"> 
 
<ion-nav-view></ion-nav-view> 
 

 
    <script id="templates/event-menu.html" type="text/ng-template"> 
 
     <ion-side-menus enable-menu-with-back-views="false"> 
 

 
     <ion-side-menu-content> 
 
      <ion-nav-bar class="bar-positive"> 
 
      <ion-nav-back-button> 
 
      </ion-nav-back-button> 
 

 
      <ion-nav-buttons side="left"> 
 
       <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> 
 
       </button> 
 
      </ion-nav-buttons> 
 
      </ion-nav-bar> 
 

 
      <ion-nav-view name="menuContent"></ion-nav-view> 
 
     </ion-side-menu-content> 
 

 
     <ion-side-menu side="left"> 
 
      <ion-header-bar class="bar-assertive"> 
 
      <h1 class="title">Menu</h1> 
 
      </ion-header-bar> 
 
      <ion-content> 
 
      <ul class="list"> 
 
      
 
       <a href="#/event/home" class="item" menu-close>Home</a> 
 
       <a href="#/event/attendees" class="item" menu-close>State view</a> 
 
      </ul> 
 
      </ion-content> 
 
     </ion-side-menu> 
 

 
     </ion-side-menus> 
 
    </script> 
 

 
    <script id="templates/home.html" type="text/ng-template"> 
 
     <ion-view view-title="Welcome"> 
 
     <ion-content class="padding"> 
 
      <h1>HOME VIEW</h1> 
 
\t \t \t \t \t <p>There is a "new Data" button on my State view, if you click it the view directive contents will be updated but in here the contents will be the same</p> 
 
      <hello-world></hello-world> 
 
     </ion-content> 
 
     </ion-view> 
 
    </script> 
 

 
    
 
    <script id="hellotemplate.html" type="text/ng-template"> 
 
    <div class="list"> 
 
    <h1>State view</h3> 
 
      
 
      <ion-item ng-repeat="data in items"> 
 
       {{ data.name }} 
 
      </ion-item> 
 
     
 
      
 
      </div> 
 
    </script> 
 
    <script id="templates/hello.html" type="text/ng-template"> 
 
     <ion-view view-title="some silly example"> 
 
     <ion-content> 
 
     <p>This button will update this view directive, but the same directive in Home will be not updated. I do do not know how to fix this </p> 
 
     <ion-item><button ng-click="newData()">new Data </button></ion-item> 
 
     <hello-world></hello-world> 
 
     </ion-content> 
 
     </ion-view> 
 
    </script> 
 
     </div>

このコードスニペットを実行して確認してください。

Here is the Fiddle