distante distante - 1 month ago 7
AngularJS Question

update directive contents on homepage when $state contents change

I have here a tricky one. I have a directive that shows items inside a

I also have a specific view where I show too this directive but with another layout.

The problems I have is that when I refresh my
in my view, if I go back (with the menu) to my Homepage that directive is not updated until I reload the page.

Is there a way to make a directive update it when the contents are changed?

Something like this is the directive that manages all the data from state and homepage

I have made a fiddle for a better understanding


Here your answer, making the synchronization between the Home page and the state View Page.

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

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

    .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"

.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){
    	$scope.newData = function(){
      		console.log("now I have new Data");
       $scope.helloData  = {}
       $rootScope.items = response.data;
        $scope.helloData.data = $rootScope.items;
      $scope.helloData = {}
       $rootScope.items = response.data;
        $scope.helloData.data = $rootScope.items;	
<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">

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

          <ion-nav-bar class="bar-positive">

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

          <ion-nav-view name="menuContent"></ion-nav-view>

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


    <script id="templates/home.html" type="text/ng-template">
      <ion-view view-title="Welcome">
        <ion-content class="padding">
          <h1>HOME VIEW</h1>
					<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>

  <script id="hellotemplate.html" type="text/ng-template">
  <div class="list">
  <h1>State view</h3>
            <ion-item ng-repeat="data in items">
              {{ data.name }}
    <script id="templates/hello.html" type="text/ng-template">
      <ion-view view-title="some silly example">
        <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>

Please run this code snippet and check.

Here is the Fiddle